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

在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防止刷新頁面導致倒計時失效的代碼,實際開發的代碼量會比上面多很多.

但是只要我們掌握基本原理和實現思路,就可以很容易的實現項目要求.

希望這篇文章對你有幫助.