原型圖
需求：手機(jī)號驗(yàn)證
發(fā)送驗(yàn)證碼之后開始60S倒計時
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ī)號" style=""> <div style="height:2rem;"> <font id="errMsg1" color="red" style=""></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" 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變量，控制時間 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效果，開始計時 $("#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) { //保存驗(yàn)證碼 $("#code").val(data); } }); } else { alert("手機(jī)號碼不能為空！?。。。?！"); } } //timer處理函數(shù) function SetRemainTimes() { if(curCount == 0) { window.clearInterval(InterValObj); //停止計時器 $("#getCode").removeAttr("disabled"); //啟用按鈕 $("#getCode").val("重新發(fā)送驗(yàn)證碼"); code = ""; //清除驗(yàn)證碼。如果不清除，過時間后，輸入收到的驗(yàn)證碼依然有效 } else { curCount--; $("#getCode").val("請在" + 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)證碼非空和錯誤驗(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>新聞熱點(diǎn)
疑難解答
