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 相关文章推荐
解决html按钮切换绑定不同函数后点击时执行多次函数问题
May 14 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
一文了解Vue中的nextTick
May 06 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php学习之流程控制实现代码
2011/06/09 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Tensorflow 实现释放内存
2020/02/03 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
收银员岗位职责
2014/02/07 职场文书
校庆接待方案
2014/03/18 职场文书
员工考勤管理制度
2015/08/06 职场文书
2019教师的学习计划
2019/06/25 职场文书
慰问信(范文3篇)
2019/10/23 职场文书