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

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

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

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

前端样式布局代码

<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事件的触发效果是不会实现出来的.

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

(0)

相关推荐

  • JS实现用户注册时获取短信验证码和倒计时功能

    在用户注册时,通常需要短信验证码,而且为了交互效果,也需要增加倒计时. 效果如下: <div class="user-form"> <form action="{{ path('zm_member_register') }}" method="post"> <div class="form-list"> <label class="register-label"&g

  • JS实现表单验证功能(验证手机号是否存在,验证码倒计时)

    废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

  • js实现发送验证码后的倒计时功能

    之前分享过只用js实现倒计时的功能,后来测试时发现,刷新或关闭网页后,倒计时就不能用了.网上也没找到合适的解决方案,所以自己就写了个,这次的算是优化版吧,能满足刷新或重新打开网页后,倒计时依然能用 特别说明: cookie最初创建的有效时间是60秒.也就是说,你如果在倒计时为20的时候,关闭网页.20秒之后再打开,是不会有倒计时显示的;但是,如果倒计时为20时,关闭页面,如果在20秒内重新打开页面,是有倒计时显示的. html代码 <input id="second" type=

  • js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)

    相关阅读: 基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭) 下面一段代码是小编给大家带来的js发送短信验证码后实现倒计时功能,代码简单易懂. 具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus

  • JS/jQ实现免费获取手机验证码倒计时效果

    最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

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

    近期因为开发一个新的H5+backbone 项目,验证输入手机号 验证码倒计时功能. #如上图所示 要实现验证码的倒计时的效果 首先做页面的布局 理清楚页面效果需要实现的逻辑思路 对手机号及验证码和密码做正则的规则校验 前端样式布局代码 <ul> <li class="phone bgImg"> <input type="text" id="phone" maxlength="11" placeh

  • 微信小程序的注册页面包含倒计时验证码、获取用户信息

    1.页面展示 2.wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/images/register.png' mode='widthFix' class="topImage"></image> <view class='input-top'> <input id="telphone" maxlength='11'

  • 手机注册发送验证码倒计时的简单实例

    如下所示: ()这里用的是input做的点击发送验证码 <input type="number" class="input" name="mobile" placeholder="手机号" style="border: none" <input class="hui_kuang"style="width: 30%;text-align: center;height:

  • 高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现

    一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时的资源.用ajax麻烦的地方是增加了请求数,而且需要写额外的js代码.和js调用的请求接口. 正对这种情况,还有一种处理方法,就是让response分块编码进行传输.response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的html代码. 分块编码(chunked encoding) chunked encoding 是http1.1 才支持编码格

  • jQuery移动web开发中的页面初始化与加载事件

    页面初始化事件(pagebeforecreate.pagecreate) Jquery Mobile会自动基于page"内的增强的约定自动初始化一些插件.例如:给一个input输入框约定了type=range属性会自动生成一个自定义滑动条.这些自动初始化的行为是受"page"插件控制的,它在执行前后部署部署事件,允许你在初始化前后操作页面,或者甚至自己提供初始化行为,禁止自动初始化.注以下的页面初始化事件在每个"page"只被触发一次,与每次页面在显示或者

  • java web开发之购物车功能实现示例代码

    之前没有接触过购物车的东东,也不知道购物车应该怎么做,所以在查询了很多资料,总结一下购物车的功能实现. 查询的资料,找到三种方法: 1.用cookie实现购物车: 2.用session实现购物车: 3.用cookie和数据库(购物车信息持久化)实现购物车: 分析一下这三种方法的优缺点: 1.单纯有cookie实现购物车,这样的购物车不是很理想,设想一下,如果客户端的浏览器把cookie给禁用了,这种方法就会在这里流产- 2.session中保存购物车的信息,这个只是在一个会话中可用,如果用户没有

  • jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述: 注册一个网站,当需要发送验证码到手机上的时候,我们经常碰到这样的效果: 首先检测手机是否符合1开头,11位数字的格式: 若不符合,则提示错误信息并返回false: 否则提交给后台,后台确定接收后返回一个值,发送按钮变为灰色并倒计时. 运行效果: --------------------------------效果演

  • 快速使用node.js进行web开发详解

    首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这是一个比较好的学习模式和过程.由于这本书是2012年出的,书中的一个web教学项目是开发一个微博.从2012到现在,node.js及其生态环境发生了很大改变,所以关于该书的学习如果照着书本显然是过于陈旧的.到目前为止,node.js的web开发框架已经升级到了Express4.12.1,对于Mong

  • js实现注册页面校验功能

    本文实例为大家分享了js实现注册页面的校验代码,供大家参考,具体内容如下 基本操作 document.getElementById():获取页面元素alert():向页面弹出提示框.innerHTML:操作页面某个元素的内容,可以获取,也可以赋值.document.write():向页面中写内容. 本案例实现注册表单的基本验证功能,主要实现非空验证.重复输入验证.邮箱验证(正则验证),通过alert提示对话框给予用户提示信息.并且当用户输入非法时阻止表单提交. 步骤分析: 第一步:绑定事件(on

  • jquery实现员工管理注册页面

    本文实例为大家分享了jquery实现员工管理注册页面的具体代码,供大家参考,具体内容如下 代码展示 HTML页面代码 <body> <div class="container"> <h2 class="text-center">用户注册</h2> <form action="Baidu.html" method="post" class="form-horizon

随机推荐