发送短信验证，后按钮倒计时，防止刷新倒计时失效

应用场景

在开发“发送短信验证”功能时候，要解决一个问题，防止恶意或频繁发送短信验证码问题。通常原理是“当点击发送按钮时，发送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>