ajax接收手機驗證碼,倒計時60秒,並進行驗證判斷
阿新 • • 發佈:2018-11-09
register.html:
<input type="text" placeholder="請輸入手機號" class="inp" name="uphone" id="uphone" style="width: 50%;"> <input type="button" name="but" id="dianji" class="inp" style="background-color:#ED5564;width: 50%;margin-left: 2rem;" value="傳送驗證碼" > <input type="text" placeholder="手機驗證碼" class="inp" name="yzm" id='yzm' > <input type="hidden" id="cookie" name="cookie" value=""> <input type="submit" id="sub" onclick="return fun()" value="註冊" class="btn-l mt5" style="border: none;"></div> <script> //==============================手機驗證碼(開始)============================= $("#dianji").click( function(){ var phone = $("#uphone").val(); var reg = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/; if((!reg.test(phone))){ alert('請確認手機號碼'); }else{ $.get("接受驗證碼的域名檔案(如:www.baidu.com/send.php)",{ph:phone},function(data) { $("#cookie").val(sum); //把獲得的驗證碼放到隱藏控制元件 }) } } ); var wait=60; function time(o) { if (wait == 0) { o.removeAttribute("disabled"); o.value="傳送驗證碼"; wait = 60; } else { o.setAttribute("disabled", true); o.value="重新發送(" + wait + ")"; wait--; setTimeout(function() { time(o) }, 1000) } } document.getElementById("dianji").onclick=function(){time(this);} //=================================手機驗證碼(結束)=================================== </script>
index.php:
public function register() { if(request()->isPost()) { $cookie=input('cookie'); //接受系統實際的驗證碼 $yzm=input('yzm'); //接受使用者輸入的驗證碼 //判斷兩個驗證碼是否一致 if($cookie!=$yzm) { $this->error('對不起,驗證碼不正確'); } } }