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 相关文章推荐
只需一行代码,轻松实现一个在线编辑器
Nov 12 Javascript
jquery中常用的函数和属性详细解析
Mar 07 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JS实现数组去重的11种方法总结
Apr 04 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
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
python动态网页批量爬取
2016/02/14 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
法国珠宝店:CLEOR
2017/01/29 全球购物
医院护士的求职信范文
2013/12/26 职场文书
调解员先进事迹材料
2014/02/07 职场文书
社区母亲节活动记录
2014/03/06 职场文书
党员检讨书范文
2014/12/27 职场文书
教师年度考核个人总结
2015/02/12 职场文书
活着观后感
2015/06/03 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Python进行区间取值案例讲解
2021/08/02 Python
Win11查看设备管理器
2022/04/19 数码科技