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

原型图

要求：手机号码验证

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

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

！doctype html html head meta charset=' utf-8 ' title注册/title meta http-equiv=' X-UA-Compatible '内容=' IE=edge ' meta name=' viewport '内容=' width=device-width，initial-scale=1.0，minimal-scale=1.0，user-scale=no ' meta name=' format-detection '内容=' phone=no ' meta name=' renderer '内容=' WebKit ' meta http-equiv=' Cache-Control '内容=' no-site app '/script src=' http 3366/脚本/头体输入类型=' text ' id=' phone ' class=' am-form-field my-radius '占位符='请输入手机号style=' div style=' height :2 rem； font id=' errmsg 1 ' color=' red ' style=' '/font/div输入id=' rpcode '类型=' text '占位符='请输入验证码输入id='getCode '类型='按钮'值='获取验证码onclick=' send messages()'/input font id=' errmsg 2 ' color=' red ' style=' display : none；位置：赦免；top :2 rem '/font/div p id=' start ' span开始/span /p！-保存验证码-输入类型='text' id='code' hidden='true '脚本var InterValObj//计时器变量，控制时间定义变量计数=60;//间隔函数，1秒执行var COunt//当前剩余秒数定义变量代码=' ';//验证码var codeLength=6；//验证码长度函数send messages(){ curCount=count；var phone=$('#phone ').val()if(validatePhone(phone)){ return；}如果(电话！='') { //设置按钮效果，开始计时$('#getCode ').attr('disabled '，' true ')；$('#getCode ')." val("请在库尔伯爵秒内输入');InterValObj=window。setinterval(SetRemainTimes，1000)；//启动计时器，1秒执行一次//向后台发送处理数据$.ajax({ url: 'getCode.action '，dataType: 'json '，type: 'get '，data: 'phone=' phone，success: function(data) { //保存验证码$('#code ').val(数据);} });} else { alert('手机号码不能为空！');} }//定时器处理函数函数SetRemainTimes(){ if(curCount==0){ window。clearinterval(区间bj)；//停止计时器$('#getCode ').移除attr(' disabled ')；//启用按钮$('#getCode ')." val("重新发送验证码');代码=' ';//清除验证码。

如果不清除，过时间后，输入收到的验证码依然有效} else { curCount-；$('#getCode ')." val("请在库尔伯爵秒内输入');} } //开始按钮点击事件$(“# start”).单击(function(){ window。位置。href=' regafter。html？phone=' $('#phone ').val()；}) //验证手机号函数validatePhone(phone){ if(phone==' '){ $(' # errmsg 1 ').html(")请先填写手机号');$('#errMsg1 ').show()；返回真；} var my reg=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))\ d { 8 })$/；if(！myreg.test(phone)) { $('#errMsg1 ').html(")请输入有效的手机号');$('#errMsg1 ').show()；返回真；}返回false} //验证码非空和错误验证函数验证代码(){ var phone=$(' # phone ').val()；定义变量代码=$('#code ').val()；var rpcode=$('#rpcode ').val()；if(validatePhone(phone)){ return true；}如果(代码=='') { $('#errMsg2 ').html(")请先获取验证码');$('#errMsg2 ').show()；返回真；} if(rpcode=='' || code！=rpcode) { $('#errMsg2 ').html(")请正确输入验证码');$('#errMsg2 ').show()；返回真；}警报（代码！=rpcode)；返回false } $(“# phone”).on('focus '，function() { $('#errMsg1 ')).hide()；}) $('#rpcode ').on('focus '，function() { $('#errMsg2 ')).hide()；})/脚本/正文/html