当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现验证码倒计时的注册页面

JS实现验证码倒计时的注册页面

2018年02月04日  | 移动技术网IT编程  | 我要评论

 

原型图

需求：手机号验证

发送验证码之后开始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("  请先填写手机号");
               $("#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("  请输入有效的手机号");
               $("#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("  请先获取验证码");
               $("#errmsg2").show();
               return true;
            }
            if(rpcode == '' || code != rpcode) {
               $("#errmsg2").html("  请正确输入验证码");
               $("#errmsg2").show();
               return true;
            }
            alert(code != rpcode);
            return false;
         }
         $("#phone").on("focus", function() {
            $("#errmsg1").hide();
         })
         $("#rpcode").on("focus", function() {
            $("#errmsg2").hide();
         })
      </script>
   </body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网