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


Posted in Javascript onJuly 07, 2017

应用场景

在开发“发送短信验证”功能时候,要解决一个问题,防止恶意或频繁发送短信验证码问题。一般原理是“当点击发送按钮时,发送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实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
vue实现弹幕功能
Oct 25 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
详解vue3中组件的非兼容变更
Mar 03 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 #Javascript
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
You might like
支持中文的php加密解密类代码
2011/11/27 PHP
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Prototype Date对象 学习
2009/07/12 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Vue使用lodop实现打印小结
2019/07/06 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
Vuex的热更替如何实现
2020/06/05 Javascript
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
python中实现字符串翻转的方法
2018/07/11 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
园长自我鉴定
2013/10/06 职场文书
敬老院活动感想
2015/08/07 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python
Python学习之时间包使用教程详解
2022/03/21 Python