JS实现验证码倒计时的注册页面
程序员文章站
2024-01-17 10:34:34
原型图
需求:手机号验证
发送验证码之后开始60s倒计时
60s以后如果没有填写验证码,可重新发送
原型图
需求:手机号验证
发送验证码之后开始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>
上一篇: [C/C++] new/delete和malloc/free基本区别
下一篇: java:模拟栈操作