表单验证js代码
请转载此文的朋友务必附带原文链接,谢谢。
原文链接:http://xuyran.blog.51cto.com/11641754/1861926
<formclass="mui-input-group"><divclass="mui-input-row"><inputtype="tel"placeholder="手机"required="required"></div><div>请输入正确的手机号码</div><divclass="mui-input-rowss"><inputtype="text"placeholder="验证码"id="yzm"required="required"><buttontype="button"class="btn"id="getCode">发送</button></div><div>验证码必须为6位数字</div><divclass="mui-input-row"><inputtype="password"placeholder="限制6-20位字符,区分大小写"name="password"required="required"></div><div>密码不得小于6或大于20个字符</div><divclass="mui-input-row"><inputtype="password"placeholder="确认密码"name="password-sure"required="required"></div><div>两次密码输入不一致</div><divclass="mui-input-row"id="submit"><buttontype="button"class="btn">提交</button></div></form>
jquery代码如下:
$(function(){//手机号检查$("input[type='tel']").keyup(function(){varreg=/^\d*$/;if(this.value.length>11){this.value=this.value.substr(0,11);$(this).focus();}elseif(!reg.test(this.value)){$(this).parent().next().show().html("手机号码只能为数字");$(this).focus();}else{$(this).parent().next().hide();}}).blur(function(){if(this.value==""){$(this).parent().next().show().html("手机号码不能为空");$(this).focus();}elseif(!/^1[3|4|5|8]\d{9}$/.test(this.value)){$(this).parent().next().show().html("请输入正确的手机号码");$(this).focus();}else{$(this).parent().next().hide();}})//获取短信验证码$("#getCode").click(function(){$("input[type='tel']").trigger('blur');vartime=120;varerror=$(this).parent().prev().css("display");alert(error);alert(error!="block");varphoneNum=$("input[type='tel']").val();if(phoneNum!=""&&error!="block"){$.ajax({type:"post",url:"/Ajax/VerificationCode.ashx",dataType:"json",data:{method:"SendCode",Phone:phoneNum},success:function(data){if(data.reslut.msg==1){vart=setInterval(function(){time--;$(this).attr("disabled",true).addClass("grey").html(time+"s<pstyle='font-size:10px'>已发送</p>")if(time==0){clearInterval(t);$("#getCode").removeAttr("disabled").removeClass("grey").html("重新获取验证码");}},1000);}else{alert(data.result.msbox);}}});}})//验证码检查$("#yzm").keyup(function(){varreg=/^\d*$/;if(this.value.length>6){this.value=this.value.substr(0,6);}elseif(!reg.test(this.value)){$(this).parent().next().show();$(this).focus();}else{$(this).parent().next().hide();}}).blur(function(){if(this.value==""){$(this).parent().next().show().html("验证码不能为空");}elseif(this.value.length<6){$(this).parent().next().show().html("验证码必须为6位数字");}})//密码检查$("input[name='password']").blur(function(){if(this.value.length<6||this.value.length>20){$(this).parent().next().show();}else{$(this).parent().next().hide();}})//确认密码$("input[name='password-sure']").keyup(function(){varpassword=$("input[name='password']").val();if(this.value!=password){$(this).parent().next().show();}else{$(this).parent().next().hide();}}).blur(function(){if(this.value==""){$(this).parent().next().show().html("密码不能为空");}})//整个表单验证$("#submit").click(function(){$(".mui-input-rowinput").triggerHandler('blur');varnumError=$('.mui-input-row+div').css("display");if(numError=="block"){returnfalse;}$.ajax({type:"post",url:"/Ajax/User.ashx",dataType:"json",data:{method:"Reg",Phone:$("input[type='tel']").val(),Pwd:$("input[name='password']").val(),Code:$("#yzm").val()},success:function(data){varresult=data.split("|");if(result[0]=="error"){alert(result[1]);//location.reload();}if(result[0]=="success"){alert(result[1]);window.location.href="registerSuccess.html";}}})})})
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。