溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊頁面

發(fā)布時(shí)間：2020-10-12 01:00:27 來源：腳本之家 閱讀：587 作者：祈澈姑娘 欄目：web開發(fā)

JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊頁面 

原型圖

需求：手機(jī)號驗(yàn)證

發(fā)送驗(yàn)證碼之后開始60S倒計(jì)時(shí)

60s以后如果沒有填寫驗(yàn)證碼，可重新發(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="請輸入手機(jī)號" >
      <div >
         <font id="errMsg1" color="red" ></font>
      </div>
      <div>
         <input id="rpcode" type="text" placeholder="請輸入驗(yàn)證碼">
         <input id="getCode" type="button" value="獲取驗(yàn)證碼" onclick="sendMessages()"></input>
         <font id="errMsg2" color="red" ></font>
      </div>
      <p id="start">
         <span>開始</span>
      </p>
      <!-- 保存驗(yàn)證碼 -->
      <input type="text" id="code" hidden="true">
      <script>
         var InterValObj; //timer變量，控制時(shí)間 
         var count = 60; //間隔函數(shù)，1秒執(zhí)行 
         var curCount; //當(dāng)前剩余秒數(shù) 
         var code = ""; //驗(yàn)證碼 
         var codeLength = 6; //驗(yàn)證碼長度 
         function sendMessages() {
            curCount = count;
            var phone = $("#phone").val()
            if(validatePhone(phone)) {
               return;
            }
            if(phone != "") {
               //設(shè)置button效果，開始計(jì)時(shí) 
               $("#getCode").attr("disabled", "true");
               $("#getCode").val("請?jiān)? + curCount + "秒內(nèi)輸入");
               InterValObj = window.setInterval(SetRemainTimes, 1000); //啟動計(jì)時(shí)器，1秒執(zhí)行一次 
               //向后臺發(fā)送處理數(shù)據(jù) 
               $.ajax({
                  url: "getCode.action",
                  dataType: "json",
                  type: "get",
                  data: "phone=" + phone,
                  success: function(data) {
                     //保存驗(yàn)證碼
                     $("#code").val(data);
                  }
               });
            } else {
               alert("手機(jī)號碼不能為空?。。。。?！");
            }
         }
         //timer處理函數(shù) 
         function SetRemainTimes() {
            if(curCount == 0) {
               window.clearInterval(InterValObj); //停止計(jì)時(shí)器 
               $("#getCode").removeAttr("disabled"); //啟用按鈕 
               $("#getCode").val("重新發(fā)送驗(yàn)證碼");
               code = ""; //清除驗(yàn)證碼。如果不清除，過時(shí)間后，輸入收到的驗(yàn)證碼依然有效   
            } else {
               curCount--;
               $("#getCode").val("請?jiān)? + curCount + "秒內(nèi)輸入");
            }
         }
         //開始按鈕點(diǎn)擊事件
         $("#start").click(function() {
            window.location.href = "regafter.html?phone=" + $("#phone").val();
         })
         //驗(yàn)證手機(jī)號
         function validatePhone(phone) {
            if(phone == '') {
               $("#errMsg1").html("  請先填寫手機(jī)號");
               $("#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("  請輸入有效的手機(jī)號");
               $("#errMsg1").show();
               return true;
            }
            return false;
         }
         //驗(yàn)證碼非空和錯(cuò)誤驗(yàn)證
         function validateCode() {
            var phone = $("#phone").val();
            var code = $("#code").val();
            var rpcode = $("#rpcode").val();
            if(validatePhone(phone)) {
               return true;
            }
            if(code == '') {
               $("#errMsg2").html("  請先獲取驗(yàn)證碼");
               $("#errMsg2").show();
               return true;
            }
            if(rpcode == '' || code != rpcode) {
               $("#errMsg2").html("  請正確輸入驗(yàn)證碼");
               $("#errMsg2").show();
               return true;
            }
            alert(code != rpcode);
            return false;
         }
         $("#phone").on("focus", function() {
            $("#errMsg1").hide();
         })
         $("#rpcode").on("focus", function() {
            $("#errMsg2").hide();
         })
      </script>
   </body>
</html>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手