JS实现验证码倒计时的注册页面


Posted in Javascript onJanuary 02, 2018

JS实现验证码倒计时的注册页面 

原型图

需求:手机号验证

发送验证码之后开始60S倒计时

60s以后如果没有填写验证码,可重新发送

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>注册</title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <meta name="format-detection" content="telephone=no">
      <meta name="renderer" content="webkit">
      <meta http-equiv="Cache-Control" content="no-siteapp" />
      <script src="http://code.jquery.com/jquery-latest.js";></script>
   </head>
   <body>
      <input type="text" id="phone" class="am-form-field my-radius" placeholder="请输入手机号" style="">
      <div style="height:2rem;">
         <font id="errMsg1" color="red" style=""></font>
      </div>
      <div>
         <input id="rpcode" type="text" placeholder="请输入验证码">
         <input id="getCode" type="button" value="获取验证码" onclick="sendMessages()"></input>
         <font id="errMsg2" color="red" style="display:none; position:absolution; top:2rem;"></font>
      </div>
      <p id="start">
         <span>开始</span>
      </p>
      <!-- 保存验证码 -->
      <input type="text" id="code" hidden="true">
      <script>
         var InterValObj; //timer变量,控制时间 
         var count = 60; //间隔函数,1秒执行 
         var curCount; //当前剩余秒数 
         var code = ""; //验证码 
         var codeLength = 6; //验证码长度 
         function sendMessages() {
            curCount = count;
            var phone = $("#phone").val()
            if(validatePhone(phone)) {
               return;
            }
            if(phone != "") {
               //设置button效果,开始计时 
               $("#getCode").attr("disabled", "true");
               $("#getCode").val("请在" + curCount + "秒内输入");
               InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器,1秒执行一次 
               //向后台发送处理数据 
               $.ajax({
                  url: "getCode.action",
                  dataType: "json",
                  type: "get",
                  data: "phone=" + phone,
                  success: function(data) {
                     //保存验证码
                     $("#code").val(data);
                  }
               });
            } else {
               alert("手机号码不能为空!!!!!!");
            }
         }
         //timer处理函数 
         function SetRemainTimes() {
            if(curCount == 0) {
               window.clearInterval(InterValObj); //停止计时器 
               $("#getCode").removeAttr("disabled"); //启用按钮 
               $("#getCode").val("重新发送验证码");
               code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效   
            } else {
               curCount--;
               $("#getCode").val("请在" + curCount + "秒内输入");
            }
         }
         //开始按钮点击事件
         $("#start").click(function() {
            window.location.href = "regafter.html?phone=" + $("#phone").val();
         })
         //验证手机号
         function validatePhone(phone) {
            if(phone == '') {
               $("#errMsg1").html("  请先填写手机号");
               $("#errMsg1").show();
               return true;
            }
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if(!myreg.test(phone)) {
               $("#errMsg1").html("  请输入有效的手机号");
               $("#errMsg1").show();
               return true;
            }
            return false;
         }
         //验证码非空和错误验证
         function validateCode() {
            var phone = $("#phone").val();
            var code = $("#code").val();
            var rpcode = $("#rpcode").val();
            if(validatePhone(phone)) {
               return true;
            }
            if(code == '') {
               $("#errMsg2").html("  请先获取验证码");
               $("#errMsg2").show();
               return true;
            }
            if(rpcode == '' || code != rpcode) {
               $("#errMsg2").html("  请正确输入验证码");
               $("#errMsg2").show();
               return true;
            }
            alert(code != rpcode);
            return false;
         }
         $("#phone").on("focus", function() {
            $("#errMsg1").hide();
         })
         $("#rpcode").on("focus", function() {
            $("#errMsg2").hide();
         })
      </script>
   </body>
</html>
Javascript 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
node.js操作mongodb学习小结
Apr 25 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
使用socket.io实现简单聊天室案例
Jan 02 #Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
You might like
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php查询ip所在地的方法
2014/12/05 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[02:53]DOTA2亚洲邀请赛 NewBee战队巡礼
2015/02/03 DOTA
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
应届生求职自荐信范文
2014/04/07 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
红歌会主持词
2015/07/02 职场文书
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL