WEB开发之注册页面验证码倒计时代码的实现


Posted in Javascript onDecember 15, 2016

近期因为开发一个新的H5+backbone 项目,验证输入手机号 验证码倒计时功能。

WEB开发之注册页面验证码倒计时代码的实现WEB开发之注册页面验证码倒计时代码的实现

#如上图所示 要实现验证码的倒计时的效果

  • 首先做页面的布局
  • 理清楚页面效果需要实现的逻辑思路
  • 对手机号及验证码和密码做正则的规则校验

前端样式布局代码

<ul>
 <li class="phone bgImg">
   <input type="text" id="phone" maxlength="11" placeholder="手机号"/>
  </li>
  <li class="vCodeImg bgImg" id="sendVCode">
   <input type="text" id="smscode" maxlength="10" placeholder="验证码"/>
   <a class="get" href="#" id="sendCode">获取</a>
   <label class="noVcode" id="notSms" hidden><i>10s</i><a href="#">|收不到验证码</a></label>
  </li>
  <li class="password bgImg">
   <input type="text" id="password" maxlength="10" placeholder="6-10位数字&字母组合登录密码"/>
   <a href="#" class="invisible bgImg"></a>
  </li>
 </ul>

后端逻辑实现

首先先做下说明,因为自己公司的框架部分,对整个项目做了三层框架的架构划分,可同时支持iOS,Android,Web端.

首先去调取我要注册的api接口部分

 1:调取register 注册接口

doPost(proxy.apis.register, {}, {
  success:function (data) {
   $$('#Register').off();
   var btn = $$("#Register");
  }
 });

 2:这个是调取的api接口部分

register:'/auth/register',   /*注册*/
 login:'/auth/login',    /*登录*/
 send_code:"/auth/getValidCode" /*发送验证码*/

 3:方法的定义放在最外面

that.eventsHandler();
 that.registerSubmit();
 that.sendMessage();
registerSubmit : function(){
   $('#Register').off('click').on('click',function(){
    // debugger;
    var phoneVal = $$.trim($$('#phone').val());
    var smsCodeVal = $$.trim($$('#smscode').val());
    var passwordVal = $$('#password').prop('value').trim();
    if (phoneVal == '') {
     popup('', '', '请输入手机号');
     return false;
    }
    var verifyphone = __reg__.phone;
    if(!verifyphone.test(phoneVal)){
     popup('','','手机号码格式错误');
     return false;
    }
    if (smsCodeVal == '') {
     popup('','','请发送短信验证码');
     return;
    }
    if (passwordVal == '') {
     popup('','','请输入密码');
     return;
    }
    $$("#Register").off('click');
   });
  },
  sendMessage : function () {
   var intervalInt;
   var sendCode = $$('#sendCode');
   var notSms = $$('#notSms');
   function sendFn() {
    sendCode.val(10).hide().off('click');
    notSms.show().off('click').on('click',notSms_click).css('color','#40cbff');
    intervalInt = setInterval(timeFn,1000);
    /*doPost(proxy.apis.send_code, {"phone":sendData.phone,"type":"borrowSms"}, {
     success:function (data) {
     if (data.status != '1') {
     popup('', '','发送短信出错');
     }
     },
     error:function(data){
     popup('', '', data.msg);
     }
     });*/
   }
   function timeFn() {
    var secondVal = sendCode.val();
    sendCode.val(secondVal - 1);
    notSms.find('i').html(secondVal-1 + 's');
    if (sendCode.val() == 0 ) {
     // debugger
     notSms.hide();
     clearInterval(intervalInt);
     sendCode.show().on('click',sendFn);
    }
   }
   function notSms_click() {
    notSms.css('color','gray');
    dialog('获取语音验证码', '验证码将以电话形式通知到你,请注意接听??', 'OK', function () {
     $$('#notSms').off('click');
     doPost(proxy.apis.send_code, {"phone": phone, "type": "registerVoice"}, {
      success: function (data) {
       if (data.status != '1') {
        popup('', '', data.msg);
       }
      },
      error: errorFn
     });
    });
   }
   sendCode.off('click').on('click',sendFn);
  }

这里列出一个和本文无关的但是有用的正则校验:(name)姓名中带点的·名字的校验,如  买买提·古力娜扎·阿凡提

var __reg__ = {
 'name':/^[\u4E00-\u9FA5]+(·[\u4E00-\u9FA5]+)*$/,
 'phone':/^1[34578]\d{9}$/
};

这里说一个timeFn() 方法,其实当我点开申请按钮的时候,你看到的是秒数在倒计时,其实这里做了2件事,第一是我给了一个数从60s开始,这个数值是写死的,endCode.val(10).hide().off('click');,然后通过sendCode去取当前的秒数值,再依次做减法运算,直到秒数减到为0.在显示 “申请”按钮 sendCode.show().on('click',sendFn);

var secondVal = sendCode.val();
 sendCode.val(secondVal - 1);
 notSms.find('i').html(secondVal-1 + 's');

这样就实现了一个验证码倒计时的效果,这里提个醒:写每个方法的时候,要看清是在内部写还是在外部写,是不是在方法的作用范围内,不然click事件的触发效果是不会实现出来的.

希望本文所述对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 学习技巧总结
May 21 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
Vue.js实现可编辑的表格
Dec 11 Javascript
浅谈javascript alert和confirm的美化
Dec 15 #Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 #Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 #Javascript
jQuery中的100个技巧汇总
Dec 15 #Javascript
You might like
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
2010/01/22 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
python登陆asp网站页面的实现代码
2015/01/14 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
windows下ipython的安装与使用详解
2016/10/20 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python时间time模块处理大全
2020/10/25 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
读书小明星事迹材料
2014/05/03 职场文书
中秋节国旗下演讲稿
2014/09/13 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
中学生逃课检讨书
2015/02/17 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书