獲取手機驗證碼按鈕的效果實現

在web網頁中,用戶的一些行爲,例如註冊,登陸,付款,修改密碼等,都須要網站經過手機驗證碼來確認其行爲身份,從而保證用戶帳戶和網站自身的安全.

一.簡介

網頁中的驗證碼通常都是採用點擊獲取的方式,在實現頁面的獲取手機驗證碼按鈕時,着重須要考慮的是如下幾點:

• 保證在手機號碼填寫符合規範的狀況下才能夠點擊按鈕或者發送請求
• 點擊按鈕後須要在一段時間內禁用按鈕,以防止用戶不斷點擊產生大量請求
• 保證在網頁刷新後驗證碼計時不會清零

在這裏咱們主要來實現前兩項效果.

保證網頁刷新後驗證碼倒計時不清零須要使用cookie實現,爲了不篇幅過長,內容雜亂,不作贅述.

二.實現

按鈕能夠用如下兩種獲取驗證碼的實現方法:

1. 當手機號輸入格式正確時,按鈕才處於可點擊狀態
2. 按鈕一直處於可點擊狀態,只是當手機號格式錯誤時,點擊後會向用戶提示錯誤,不向服務器發送請求

這兩種方法雖然代碼可能不一樣,可是基本原理是差很少的,這裏咱們就只使用第一種方法來進行說明.

通常驗證碼的頁面HTML結構相似以下:

 

<div>
   <p >請輸入手機號:</p>
   <input class="phone" type="number">
   <p>驗證碼:</p>
   <input type="number" name="" id="">
   <input type="button" value="獲取驗證碼" name="yzm" class="yzm" disabled="disabled">
   <br><br>
   <input type="submit" value="提交">
 </div>

 

 

 

頁面如圖:

在輸入正確格式的手機號碼後,獲取驗證碼按鈕取消禁用狀態,可點擊.

點擊後按鈕再次進入禁用狀態並開始倒計時,倒計時完畢後再次進入可點擊狀態.

具體實現流程仍是比較簡單的.代碼以下:

$(document).ready(function(){
    var ordertime=20   //設置再次發送驗證碼等待時間
    var timeleft=ordertime
    var btn=$(".yzm")
    var phone=$(".phone")
    var reg = /^1[0-9]{10}$/;  //電話號碼的正則匹配式

    phone.keyup(function(){
      if (reg.test(phone.val())){
        btn.removeAttr("disabled")  //當號碼符合規則後發送驗證碼按鈕可點擊
        }
      else{
        btn.attr("disabled",true)
      }
    })

    //計時函數
    function timeCount(){
       timeleft-=1
       if (timeleft>0){
       btn.val(timeleft+" 秒後重發");
       setTimeout(timeCount,1000)
       }
       else {
        btn.val("從新發送");
        timeleft=ordertime   //重置等待時間
        btn.removeAttr("disabled");
       }
     }

    //事件處理函數
    btn.on("click",function(){
        $(this).attr("disabled",true); //防止屢次點擊
        //此處可添加 ajax請求 向後臺發送 獲取驗證碼請求
        timeCount(this);
        })

      })

 

 

ajax請求格式大概以下,能夠用於向服務器請求發送驗證碼到制定手機

$.ajax({
     　　type: "POST", //用POST方式傳輸
     　　dataType: "text", //數據格式:JSON
     　　url: 'Login.ashx', //目標地址
    　　 data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code, //post攜帶數據
    　　 error: function () { }, //請求錯誤時的處理函數
     　　success: function (){ }, //請求成功時執行的函數
        });

 

另外在實際開發中,還須要有與服務器驗證用戶填寫驗證碼是否正確的ajax請求等,再加上使用cookie防止刷新頁面致使倒計時失效的代碼,實際開發的代碼量會比上面多不少.

可是隻要咱們掌握基本原理和實現思路,就能夠很容易的實現項目要求.

但願這篇文章對你有幫助.