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 相关文章推荐
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
Angularjs 基础入门
Dec 26 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
小程序实现列表删除功能
Oct 30 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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
wordpress之wp-settings.php
2007/08/17 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python命名空间详解
2014/08/18 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
Sanic框架Cookies操作示例
2018/07/17 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
python微信公众号开发简单流程实现
2020/03/09 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
大学自我鉴定
2013/12/20 职场文书
怎样填写就业意向
2014/04/02 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
学习委员竞选稿
2015/11/20 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
社区干部培训心得体会
2016/01/06 职场文书
幼儿园小班教学反思
2016/03/03 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫