JS實現驗證碼倒計時的注冊頁面

來源：懂視網責編：小采時間：2020-11-27 22:22:18

JS實現驗證碼倒計時的注冊頁面

JS實現驗證碼倒計時的注冊頁面: 原型圖需求：手機號驗證發送驗證碼之后開始60S倒計時 60s以后如果沒有填寫驗證碼，可重新發送 <!doctype html> <html> <head> <meta charset=utf-8> <title>注冊</title>

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現驗證碼倒計時的注冊頁面: 原型圖需求：手機號驗證發送驗證碼之后開始60S倒計時 60s以后如果沒有填寫驗證碼，可重新發送 <!doctype html> <html> <head> <meta charset=utf-8> <title>注冊</title>

原型圖

需求：手機號驗證

發送驗證碼之后開始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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實現驗證碼倒計時的注冊頁面

推薦度：

點擊下載本文 文檔為doc格式

標簽：注冊驗證碼頁面

熱門焦點

JS實現驗證碼倒計時的注冊頁面

JS實現驗證碼倒計時的注冊頁面

JS實現驗證碼倒計時的注冊頁面

最新推薦

猜你喜歡

熱門推薦