JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)

应用场景

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

以上所述是小编给大家介绍的JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对菜鸟教程(cainiaojc.com)网站的支持!

声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#cainiaojc.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。