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 相关文章推荐
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
Aug 21 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
Nov 24 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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下载CSS文件中的图片的代码
2013/09/24 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
巧用Javascript的逻辑运算符
2016/12/02 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python简单文本处理的方法
2015/07/10 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Python 实现微信防撤回功能
2019/04/29 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
教师实习自我鉴定
2013/12/13 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
留学经费担保书
2014/05/12 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
银行给客户的感谢信
2015/01/23 职场文书
碧霞祠导游词
2015/02/09 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL