1. 程式人生 > >ajax接收手機驗證碼,倒計時60秒,並進行驗證判斷

ajax接收手機驗證碼,倒計時60秒,並進行驗證判斷

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('對不起,驗證碼不正確');
            }
    }
}