JS實現(xiàn)驗證碼倒計時的注冊頁面

更新時間：2018年01月02日 14:09:53 作者：祈澈姑娘

這篇文章給大家分享一段實例代碼發(fā)送驗證碼之后開始60S倒計時功能，具體實例代碼大家參考下本文

原型圖

需求：手機號驗證

發(fā)送驗證碼之后開始60S倒計時

60s以后如果沒有填寫驗證碼，可重新發(fā)送

<!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; //間隔函數(shù)，1秒執(zhí)行 
         var curCount; //當(dāng)前剩余秒數(shù) 
         var code = ""; //驗證碼 
         var codeLength = 6; //驗證碼長度 
         function sendMessages() {
            curCount = count;
            var phone = $("#phone").val()
            if(validatePhone(phone)) {
               return;
            }
            if(phone != "") {
               //設(shè)置button效果，開始計時 
               $("#getCode").attr("disabled", "true");
               $("#getCode").val("請在" + curCount + "秒內(nèi)輸入");
               InterValObj = window.setInterval(SetRemainTimes, 1000); //啟動計時器，1秒執(zhí)行一次 
               //向后臺發(fā)送處理數(shù)據(jù) 
               $.ajax({
                  url: "getCode.action",
                  dataType: "json",
                  type: "get",
                  data: "phone=" + phone,
                  success: function(data) {
                     //保存驗證碼
                     $("#code").val(data);
                  }
               });
            } else {
               alert("手機號碼不能為空?。。。。。?);
            }
         }
         //timer處理函數(shù) 
         function SetRemainTimes() {
            if(curCount == 0) {
               window.clearInterval(InterValObj); //停止計時器 
               $("#getCode").removeAttr("disabled"); //啟用按鈕 
               $("#getCode").val("重新發(fā)送驗證碼");
               code = ""; //清除驗證碼。如果不清除，過時間后，輸入收到的驗證碼依然有效   
            } else {
               curCount--;
               $("#getCode").val("請在" + curCount + "秒內(nèi)輸入");
            }
         }
         //開始按鈕點擊事件
         $("#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>

您可能感興趣的文章: