JS实现表单验证功能(验证手机号是否存在,验证码倒计时)

前端之家收集整理的这篇文章主要介绍了JS实现表单验证功能(验证手机号是否存在,验证码倒计时)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

废话不多说直接上代码

HTML代码

登录密码
注册

JS代码

函数,1秒执行 var curCount;//当前剩余秒数 var code = ""; //验证码 var regType; var phoneTemplet; var codeLength = 4;//验证码长度 $(".code-btn").click(function(){ curCount = count; var phone=$.trim($(".j-telphone").val());//手机号码 var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; var jtel = $(".j-telphone"); if(phone != "" && isMobile.test(phone) && phone.length==11){ //设置button效果,开始计时 $("#btnSendCode").attr("disabled","true"); $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); InterValObj = window.setInterval(SetRemainTime,1000); //启动计时器,1秒执行一次 //产生验证码 for (var i = 0; i < codeLength; i++) { code += parseInt(Math.random() * 9).toString(); } //向后台获验证码 $.ajax({ url : base + "/",type: "POST",// dataType: "text",// data: "phones=" + phone + "&code=" + code,dataType: "JSON",data:{ phones:phone,code: code,regType:"1",phoneTemplet:"phone_uc" },success: function (data){ if(data.flag=="F"){ $(".code-msg").html(data.errorInfo); }else{ $(".code-msg").html(data.errorInfo); } } }); }else{ $('.tel-msg').text('请输入有效的手机号码'); } }); //timer处理函数 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 } else { curCount--; $("#btnSendCode").val("请在" + curCount + "秒内输入验证码"); } } })

以上所述是小编给大家介绍的JS实现表单验证功能(验证手机号是否存在,验证码倒计时)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章