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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:22:18

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

JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁面: 原型圖需求：手機(jī)號(hào)驗(yàn)證發(fā)送驗(yàn)證碼之后開始60S倒計(jì)時(shí) 60s以后如果沒有填寫驗(yàn)證碼，可重新發(fā)送 <!doctype html> <html> <head> <meta charset=utf-8> <title>注冊(cè)</title>

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)的注冊(cè)頁面: 原型圖需求：手機(jī)號(hào)驗(yàn)證發(fā)送驗(yàn)證碼之后開始60S倒計(jì)時(shí) 60s以后如果沒有填寫驗(yàn)證碼，可重新發(fā)送 <!doctype html> <html> <head> <meta charset=utf-8> <title>注冊(cè)</title>

原型圖

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

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

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

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>注冊(cè)</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="請(qǐng)輸入手機(jī)號(hào)" style="">
 <div style="height:2rem;">
 <font id="errMsg1" color="red" style=""></font>
 </div>
 <div>
 <input id="rpcode" type="text" placeholder="請(qǐng)輸入驗(yàn)證碼">
 <input id="getCode" type="button" value="獲取驗(yàn)證碼" onclick="sendMessages()"></input>
 <font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></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)證碼長(zhǎng)度 
 function sendMessages() {
 curCount = count;
 var phone = $("#phone").val()
 if(validatePhone(phone)) {
 return;
 }
 if(phone != "") {
 //設(shè)置button效果，開始計(jì)時(shí) 
 $("#getCode").attr("disabled", "true");
 $("#getCode").val("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入");
 InterValObj = window.setInterval(SetRemainTimes, 1000); //啟動(dòng)計(jì)時(shí)器，1秒執(zhí)行一次 
 //向后臺(tái)發(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ī)號(hào)碼不能為空?。。。。?！");
 }
 }
 //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("請(qǐng)?jiān)? + curCount + "秒內(nèi)輸入");
 }
 }
 //開始按鈕點(diǎn)擊事件
 $("#start").click(function() {
 window.location.href = "regafter.html?phone=" + $("#phone").val();
 })
 //驗(yàn)證手機(jī)號(hào)
 function validatePhone(phone) {
 if(phone == '') {
 $("#errMsg1").html(" 請(qǐng)先填寫手機(jī)號(hào)");
 $("#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(" 請(qǐng)輸入有效的手機(jī)號(hào)");
 $("#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(" 請(qǐng)先獲取驗(yàn)證碼");
 $("#errMsg2").show();
 return true;
 }
 if(rpcode == '' || code != rpcode) {
 $("#errMsg2").html(" 請(qǐng)正確輸入驗(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>

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：注冊(cè) 驗(yàn)證碼頁面

熱門焦點(diǎn)

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

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

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

最新推薦

猜你喜歡

熱門推薦