验证码倒计时的注册页面

原型图

需求:手机号验证 发送验证码之后开始60S倒计时 60s以后如果没有填写验证码,可重新发送

<!doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <title>注册</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
            <meta name="format-detection" content="telephone=no">
            <meta name="renderer" content="webkit">
            <meta http-equiv="Cache-Control" content="no-siteapp" />
            <script src="http://code.jquery.com/jquery-latest.js";></script>
      </head>
      <body>
            <input type="text" id="phone" class="am-form-field  my-radius" placeholder="请输入手机号" style="">
            <div style="height:2rem;">
                  <font id="errMsg1" color="red" style=""></font>
            </div>
            <div>
                  <input id="rpcode" type="text" placeholder="请输入验证码">
                  <input id="getCode" type="button" value="获取验证码" onclick="sendMessages()"></input>
                  <font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></font>
            </div>
            <p id="start">
                  <span>开始</span>
            </p>
            <!-- 保存验证码  -->
            <input type="text" id="code" hidden="true">
            <script>
                  var InterValObj; //timer变量,控制时间 
                  var count = 60; //间隔函数,1秒执行 
                  var curCount; //当前剩余秒数 
                  var code = ""; //验证码 
                  var codeLength = 6; //验证码长度 
                  function sendMessages() {
                        curCount = count;
                        var phone = $("#phone").val()
                        if(validatePhone(phone)) {
                              return;
                        }
                        if(phone != "") {
                              //设置button效果,开始计时 
                              $("#getCode").attr("disabled", "true");
                              $("#getCode").val("请在" + curCount + "秒内输入");
                              InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器,1秒执行一次 
                              //向后台发送处理数据 
                              $.ajax({
                                    url: "getCode.action",
                                    dataType: "json",
                                    type: "get",
                                    data: "phone=" + phone,
                                    success: function(data) {
                                          //保存验证码
                                          $("#code").val(data);
                                    }
                              });
                        } else {
                              alert("手机号码不能为空!!!!!!");
                        }
                  }
                  //timer处理函数 
                  function SetRemainTimes() {
                        if(curCount == 0) {
                              window.clearInterval(InterValObj); //停止计时器 
                              $("#getCode").removeAttr("disabled"); //启用按钮 
                              $("#getCode").val("重新发送验证码");
                              code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效     
                        } else {
                              curCount--;
                              $("#getCode").val("请在" + curCount + "秒内输入");
                        }
                  }
                  //开始按钮点击事件
                  $("#start").click(function() {
                        window.location.href = "regafter.html?phone=" + $("#phone").val();
                  })
                  //验证手机号
                  function validatePhone(phone) {
                        if(phone == '') {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请先填写手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                        if(!myreg.test(phone)) {
                              $("#errMsg1").html("&nbsp;&nbsp;&nbsp;&nbsp;请输入有效的手机号");
                              $("#errMsg1").show();
                              return true;
                        }
                        return false;
                  }
                  //验证码非空和错误验证
                  function validateCode() {
                        var phone = $("#phone").val();
                        var code = $("#code").val();
                        var rpcode = $("#rpcode").val();
                        if(validatePhone(phone)) {
                              return true;
                        }
                        if(code == '') {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请先获取验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        if(rpcode == '' || code != rpcode) {
                              $("#errMsg2").html("&nbsp;&nbsp;&nbsp;&nbsp;请正确输入验证码");
                              $("#errMsg2").show();
                              return true;
                        }
                        alert(code != rpcode);
                        return false;
                  }
                  $("#phone").on("focus", function() {
                        $("#errMsg1").hide();
                  })
                  $("#rpcode").on("focus", function() {
                        $("#errMsg2").hide();
                  })
            </script>
      </body>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

推荐+1置顶+1(分享、讨论、实现) 通用软件注册功能之建立有效的软件保护机制

         众所周知,一些共享软件往往提供给使用者的是一个功能不受限制的限时使用版,在试用期内使用者可以无限制的使用软件的全部功能(只是可能会出现提示使用...

1051
来自专栏散尽浮华

Linux下防御DDOS攻击的操作梳理

DDOS的全称是Distributed Denial of Service,即"分布式拒绝服务攻击",是指击者利用大量“肉鸡”对攻击目标发动大量的正常或非正常请...

1.5K8
来自专栏玄魂工作室

CTF实战23 木马攻击技术

值得注意的是,木马屠城记并非于古希腊诗人荷马的两部著作伊利亚特与奥德赛里记载,而是在罗马帝国时期的诗人维吉尔所写的史诗《埃涅阿斯纪》中, 才第一次被记载

1442
来自专栏Web 开发

iOS开发者证书-2015年中文版

我们都知道,制作一款iOS的App需要iOS的开发者证书。在Apple的开发者网站上面,有一个栏目是‘Certificates, Identifiers & P...

750
来自专栏黑白安全

短信轰炸剖析

在互联网中,由于越来越多的平台在注册会员,找回密码,以及手机支付的时候,为了防止他人冒用,恶意盗号,资金的安全往往都会使用短信验证码来验证,从而提升帐号的安全性...

1.4K4
来自专栏FreeBuf

SQLCipher之攻与防

0×00 SQLCipher 在移动端,不管是iOS还是Android,开发人员用的最多的本地数据库非SQlite莫属了。SQLite是一个轻量的、跨平台的、开...

7516
来自专栏女程序员的日常

全面理解SSD和NAND Flash

  Flash Memory又叫做闪存,是一种非易失性存储器。非易失性是指断电之后数据不会丢失,这里就涉及到断电保护(后面详细讲解)。

2663
来自专栏技术博文

php 二维码生成类

<?php /** * BarcodeQR - Code QR Barcode Image Generator (PNG) * @package Barco...

4665
来自专栏FreeBuf

深入了解VoWiFi安全性

T-mobile开创了智能手机嵌入原生无缝支持WiFi调用的技术。这种集成WiFi调用功能的技术与当今大部分智能手机供应商所采用的方案一样。T-mobile在2...

21510
来自专栏腾讯数据库技术

OpenSSL与yaSSL性能对比

摘要 MySQL可以使用OpenSSL或yaSSL/wolfSSL进行编译,这两者都支持基于OpenSSL API的加密连接。在5.7版本,我们知道默认情况下...

5631

扫码关注云+社区

领取腾讯云代金券