發送短信驗證後，按鈕倒計時，防止刷新倒計時失效

應用場景

在開發“發送短信驗證”功能時候，要解決一個問題，防止惡意或頻繁發送短信驗證碼問題。一般原理是“當點擊發送按鈕時，發送ajax請求到服務器發送短信驗證碼，成功則把發送按鈕設置爲不可點擊，並且調用定時器，按鈕顯示倒計時”。如果就這樣不對倒計時存儲做處理，那麼當刷新頁面，會出現倒計時失效，按鈕可點擊。提供以下解決方案：

• 利用cookie存儲倒計時

• 利用HTML5的localStorage 存儲倒計時

利用cookie存儲倒計時

發送成功後把剩餘倒計時存儲到cookie，當頁面刷新時，檢查cookie 是否還存儲着剩餘倒計時？，如果有，發送按鈕則保持倒計時狀態，不可點擊，否則發送按鈕可點擊。

HTML代碼

<input type="button" id="btn" disabled="disabled" value="獲取驗證碼">

JQuery代碼

<!--引入jquery.cookie.js 插件-->
<script src="http:jquery.cookie.js" type="text/javascript" charset="utf-8"></script>

<!--邏輯功能代碼 -->
<script>
    $(function(){
               
      if($.cookie("total")!=undefined&&$.cookie("total")!='NaN'&&$.cookie("total")!='null'){//cookie存在倒計時
          
          timekeeping();
          
      }else{//cookie 沒有倒計時
        
          $('#btn').attr("disabled", false);
      }
    
      function timekeeping(){
        //把按鈕設置爲不可以點擊
        $('#btn').attr("disabled", true);
        var interval=setInterval(function(){//每秒讀取一次cookie
          //從cookie 中讀取剩餘倒計時
          total=$.cookie("total");
          //在發送按鈕顯示剩餘倒計時
          $('#btn').val('請等待'+total+'秒');
          //把剩餘總倒計時減掉1
          total--;
    
          if(total==0){//剩餘倒計時爲零，則顯示 重新發送，可點擊
          //清除定時器
          clearInterval(interval);
          //刪除cookie
          total=$.cookie("total",total, { expires: -1 });
    
          //顯示重新發送
          $('#btn').val('重新發送');
          //把發送按鈕設置爲可點擊
          $('#btn').attr("disabled", false);
          }else{//剩餘倒計時不爲零
    
          //重新寫入總倒計時
          $.cookie("total",total);
          }
    
        },1000);
    
      }
      //綁定發送按鈕
       $('#btn').click(function(event) {
      /* Act on the event */


      // alert($("#btn").val());

      //校驗手機號碼
      var phone=$('#phone').val();
      var pre=/^[1][358][0-9]{9}$/;
      if(phone==''){
          layer.open({
              content: '手機號碼不能爲空',
              time: 2
          });
      
          return this;
      }else{
          var pre=/^[1][358][0-9]{9}$/;
          if(!pre.test(phone)){
            layer.open({
                content: '手機號碼格式有誤！',
                time: 2
            });
          
              return this;
          }
      }


      $.ajax({
        url: '',//服務器發送短信
        type: 'GET',
        dataType: 'json',
        data: {phone: phone},
      })
      .done(function(re) {


            var str="發送短信驗證碼成功，請注意查看您的手機";
            // console.log(re);
            if(re){
               $.cookie("total",60);
               timekeeping();
            }else{
            
                switch (re[0]) {
                  case '160038':
                    
                    str="短信驗證碼發送過頻繁";
                    break; 
                  case '160034':
                    
                    str="號碼黑名單";
                    break; 
                  case '160000':
                    
                    str="系統錯誤";
                    break;
                  case '000000':
                    
                    str="發送成功";
                    break;
                  case '112300':
                    
                    str="接收短信的手機號碼爲空";
                    break;  
                  case '160040':
                    
                    str="驗證碼超出發送上限";
                    break;
                  case '160042':
    
                    str="號碼格式有誤";
                    break; 
                 
                  default:
                    str="發送驗證碼失敗";
                    break;
                }
            }
            

           layer.open({
                  content: str,
                  time: 2
              });
        
   
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
      

    });
    })
</script>