驗證碼倒計時的註冊頁面

時間 2021-08-15

標籤 html 前端 jquery web ajax 編程 json app ide 函數欄目 HTML 简体版

原文原文鏈接

原型圖

需求：手機號驗證
發送驗證碼以後開始60S倒計時
60s之後若是沒有填寫驗證碼，可從新發送html

<!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>