JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
废话不多说直接上代码
html代码:
<formmethod="post"id="form_hroizon"enctype="multipart/form-data"action="/"> <inputtype="hidden"name="phoneTemplet"id="phoneTemplet"> <inputtype="hidden"name="regType"id="regType"> <divclass="c-login-input"> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">手机号</label> <divclass="pull-left"> <inputtype="tel"autocomplete="off"class="input-controlput-width440j-telphone"id="inputtel"name="phones"placeholder="请输入您的电话号码"value=""> <spanclass="f12redtel-msg"></span> <divclass="c-login-errtips"style="display:none;"></div> </div> </div> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">登录密码</label> <divclass="pull-left"> <inputtype="password"class="input-controlput-width440fistpwd"id="inputpwd"name="password"placeholder="请输入密码"value=""> <spanclass="f12redpwd-msg"></span> </div> </div> <divclass="form-group"> <labelfor="inputEmail3"class="label-controllabel-width120pull-leftt-r-ff16">验证码</label> <divclass="pull-left"> <inputtype="tel"class="input-controlput-with100vericode"id="inputEmail3"name="code"placeholder="请输入验证码"> <inputid="btnSendCode"type="button"value="免费获取验证码"class="j-getcodef12b-i-kbtncode-btnc-p"/> <spanclass="f12redcode-msg"></span> </div> </div> </div> <divclass="form-group"> <aclass="j-sends"type="submit"name="submit"target="_self"href="javascript:void(0)">注册</a> </div> </form>
JS代码:
<scripttype="text/javascript"> $(function(){ $(".j-sends").click(function(){ varphones=$.trim($(".j-telphone").val()); varisMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if(!phones){ $('.tel-msg').text('请输入手机号码,不能为空'); returnfalse; }elseif(!isMobile.test(phones)){ $('.tel-msg').text('请输入有效的手机号码'); returnfalse; }else{ //手机号码是否存在 $.ajax({ url:"/",// type:"post", dataType:"JSON", data:{ phones:phones, }, contentType:'application/json;charset=UTF-8', //async:false, success:function(data){ if(data.flag=="1"){// $('.tel-msg').html(data.errorInfo);// returnfalse; }else{ $('.tel-msg').html(data.errorInfo);//可 } }, error:function(){ } }); } }) //验证码倒计时 varInterValObj;//timer变量,控制时间 varcount=30;//间隔函数,1秒执行 varcurCount;//当前剩余秒数 varcode="";//验证码 varregType; varphoneTemplet; varcodeLength=4;//验证码长度 $(".code-btn").click(function(){ curCount=count; varphone=$.trim($(".j-telphone").val());//手机号码 varisMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; varjtel=$(".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(vari=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处理函数 functionSetRemainTime(){ if(curCount==0){ window.clearInterval(InterValObj);//停止计时器 $("#btnSendCode").removeAttr("disabled");//启用按钮 $("#btnSendCode").val("重新发送验证码"); code="";//清除验证码。如果不清除,过时间后,输入收到的验证码依然有效 } else{ curCount--; $("#btnSendCode").val("请在"+curCount+"秒内输入验证码"); } } }) </script>
以上所述是小编给大家介绍的JS实现表单验证功能(验证手机号是否存在,验证码倒计时),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!