註冊之手機發送驗證碼
阿新 • • 發佈:2018-12-30
前端展示效果:
程式碼:
<input type="text" id="telephone" value="" name="telephone" placeholder="手機號" />
<input type="text" value="" name="checkCode" placeholder="請輸入驗證碼" />
<input type="button" onclick="sendCode(this)" value="獲取驗證碼">
//倒計時時間 var time = 10; //定時器id,用於結束定時器 var intervalID; //按鈕物件 var bo; //引數:獲取驗證碼按鈕物件 function sendCode(buttonObj) { //校驗手機號格式是否正確 //1 定義正則物件 var regExp = new RegExp("^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$", "g"); //2 校驗 if(!regExp.test($("#telephone").val())) { //失敗=>提示請輸入正確的手機號 layer.msg("請輸入正確的手機號"); return; } //------------------------------------------------------------------ //ajax請求後臺傳送手機驗證碼簡訊 url:向後臺傳送請求連結 $.post(url, { telephone: $("#telephone").val() }); //------------------------------------------------------------------ bo = buttonObj; //1.點選按鈕後,按鈕變灰(禁用).並改變按鈕上的文字為60秒後重新發送 bo.disabled = true; bo.value = time + "秒後重新發送"; //2.設定一個js定時器,每隔一秒觸發一次方法 intervalID = setInterval(timeCount, 1000); } function timeCount() { time = time - 1; //讓秒數減一. //3.書寫觸發的方法: //判斷秒數是否大於0 if(time > 0) { //大於0 = 更新按鈕上的文字 bo.value = time + "秒後重新發送"; } else { //等於0 = 按鈕恢復可以點狀態,按鈕上文字重新變為"獲取驗證碼" bo.disabled = false; bo.value = "獲取驗證碼"; time = 10; //停掉定時器 clearInterval(intervalID); } }