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 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
JavaScript数值类型知识汇总
Nov 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
提升PHP速度全攻略
2006/10/09 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
Python中使用中文的方法
2011/02/19 Python
wxPython中文教程入门实例
2014/06/09 Python
python简单的函数定义和用法实例
2015/05/07 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python在每个字符后添加空格的实例
2018/05/07 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
生日宴会主持词
2014/03/20 职场文书
产假请假条
2014/04/10 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js