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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
vue组件入门知识全梳理
Sep 21 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
B2K与车机的中波PK
2021/03/02 无线电
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python搭建微信公众平台
2016/02/09 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python入门之后再看点什么好?
2018/03/05 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
资源工程专业毕业生求职信
2014/02/27 职场文书
大型营销活动计划书
2014/04/28 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
初中信息技术教学反思
2016/02/16 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang