JS表单验证的代码(常用)
最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到毛票票平台,供大家学习,需要的朋友参考下吧!
注册验证:
<scriptlanguage="JavaScript"src="js/jquery-1.9.1.min.js"type="text/javascript"></script> //验证表单 functionvailForm(){ varform=jQuery("#editForm"); if(!vailNickName())return; if(!vailPhone())return; if(!vailPwd())return; if(!vailConfirmPwd())return; if(!vailEmail())return; if(!vailCode())return; if(!vailAgree())return; form.submit(); } //验证昵称 functionvailNickName(){ varnickName=jQuery("#nickName").val(); varflag=false; varmessage=""; varpatrn=/^\d+$/; varlength=getNickNameLength(); if(nickName==''){ message="昵称不能为空!"; }elseif(length<4||length>16){ message="昵称为4-16个字符!"; }elseif(checkNickNameIsExist()){ message="该昵称已经存在,请重新输入!"; }else{ flag=true; } if(!flag){ jQuery("#nickNameDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#nickName").focus(); }else{ jQuery("#nickNameDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>该昵称可用"); } returnflag; } //计算昵称长度 functiongetNickNameLength(){ varnickName=jQuery("#nickName").val(); varlen=0; for(vari=0;i<nickName.length;i++){ vara=nickName.charAt(i); //函数格式:stringObj.match(rgExp)stringObj为字符串必选rgExp为正则表达式必选项 //返回值:如果能匹配则返回结果数组,如果不能匹配返回null if(a.match(/[^\x00-\xff]/ig)!=null){ len+=2; }else{ len+=1; } } returnlen; } //验证昵称是否存在 functioncheckNickNameIsExist(){ varnickName=jQuery("#nickName").val(); varflag=false; jQuery.ajax( {url:"checkNickName?t="+(newDate()).getTime(), data:{nickName:nickName}, dataType:"json", type:"GET", async:false, success:function(data){ varstatus=data.status; if(status=="1"){ flag=true; } } }); returnflag; } //验证手机号 functionvailPhone(){ varphone=jQuery("#phone").val(); varflag=false; varmessage=""; //varmyreg=/^(((13[0-9]{1})|159|153)+\d{8})$/; varmyreg=/^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-3]{1})|(18[5-9]{1}))+\d{8})$/; if(phone==''){ message="手机号码不能为空!"; }elseif(phone.length!=11){ message="请输入有效的手机号码!"; }elseif(!myreg.test(phone)){ message="请输入有效的手机号码!"; }elseif(checkPhoneIsExist()){ message="该手机号码已经被绑定!"; }else{ flag=true; } if(!flag){ jQuery("#phoneDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#phone").focus(); }else{ jQuery("#phoneDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>该手机号码可用"); } returnflag; } //验证手机号是否存在 functioncheckPhoneIsExist(){ varphone=jQuery("#phone").val(); varflag=true; jQuery.ajax( {url:"checkPhone?t="+(newDate()).getTime(), data:{phone:phone}, dataType:"json", type:"GET", async:false, success:function(data){ varstatus=data.status; if(status=="0"){ flag=false; } } }); returnflag; } //验证密码 functionvailPwd(){ varpassword=jQuery("#password").val(); varflag=false; varmessage=""; varpatrn=/^\d+$/; if(password==''){ message="密码不能为空!"; }elseif(password.length<6||password.length>16){ message="密码6-16位!"; }elseif(patrn.test(password)){ message="密码不能全是数字!"; }else{ flag=true; } if(!flag){ jQuery("#passwordDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#password").focus(); }else{ jQuery("#passwordDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>该密码可用"); } returnflag; } //验证确认密码 functionvailConfirmPwd(){ varconfirmPassword=jQuery("#confirm_password").val(); varpatrn=/^\d+$/; varpassword=jQuery("#password").val(); varflag=false; varmessage=""; if(confirmPassword==''){ message="请输入确认密码!"; }elseif(confirmPassword!=password){ message="二次密码输入不一致,请重新输入!"; }elseif(patrn.test(password)){ message="密码不能全是数字!"; }else{ flag=true; } if(!flag){ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#confirm_password").focus(); }else{ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>密码正确"); } returnflag; } //验证邮箱 functionvailEmail(){ varemail=jQuery("#email").val(); varflag=false; varmessage=""; varmyreg=/^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(email==''){ message="邮箱不能为空!"; }elseif(!myreg.test(email)){ message="请输入有效的邮箱地址!"; }elseif(checkEmailIsExist()){ message="该邮箱地址已经被注册!"; }else{ flag=true; } if(!flag){ jQuery("#emailDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#emailP").html(""); jQuery("#emailP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#email").focus(); }else{ jQuery("#emailDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#emailP").html(""); jQuery("#emailP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>该邮箱可用"); } returnflag; } //验证邮箱是否存在 functioncheckEmailIsExist(){ varemail=jQuery("#email").val(); varflag=false; jQuery.ajax( {url:"checkEmail?t="+(newDate()).getTime(), data:{email:email}, dataType:"json", type:"GET", async:false, success:function(data){ varstatus=data.status; if(status=="1"){ flag=true; } } }); returnflag; } //验证验证码 functionvailCode(){ varrandCode=jQuery("#randCode").val(); varflag=false; varmessage=""; if(randCode==''){ message="请输入验证码!"; }elseif(!checkCode()){ message="验证码不正确!"; }else{ flag=true; } if(!flag){ jQuery("#randCodeDiv").removeClass().addClass("ui-form-itemhas-error"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<iclass=\"icon-errorui-margin-right10\"> <\/i>"+message); //jQuery("#randCode").focus(); }else{ jQuery("#randCodeDiv").removeClass().addClass("ui-form-itemhas-success"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<iclass=\"icon-successui-margin-right10\"> <\/i>"); } returnflag; } //检查随机验证码是否正确 functioncheckCode(){ varrandCode=jQuery("#randCode").val(); varflag=false; jQuery.ajax( {url:"checkRandCode?t="+(newDate()).getTime(), data:{randCode:randCode}, dataType:"json", type:"GET", async:false, success:function(data){ varstatus=data.status; if(status=="1"){ flag=true; } } }); returnflag; } //判断是否选中 functionvailAgree(){ if(jQuery("#agree").is(":checked")){ returntrue; }else{ alert("请确认是否阅读并同意XX协议"); } returnfalse; } functiondelHtmlTag(str){varstr=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html标记varresult=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格returnresult.replace(/\s/g,"");//去除文章中间空格}<!DOCTYPEhtml><html><body><h1>我的第一段JavaScript</h1><p>请输入数字。如果输入值不是数字,浏览器会弹出提示框。</p><inputid="demo"type="text"><script>functionmyFunction(){varx=document.getElementById("demo").value;if(x==""){alert("输入不能为空");return;}if(isNaN(x)){alert("请输入数字");return;}if(x.length!=6){alert("请输入6位数字");return;}}</script><buttontype="button"onclick="myFunction()">点击这里</button></body></html> //验证密码为数字字母下划线 functionCheckPwd(pwd){ varvalidStr="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,"; for(i=0;i<pwd.length;i++){ if(validStr.indexOf(pwd.charAt(i))==-1){ returnfalse; } } returntrue; } //验证邮箱格式 functioncheckemail(email){ varfilter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if(!filter.test(email)){ returnfalse; } returntrue; } functionisEmail(val){ return/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_\`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/.test(val); } ///手机号码验证 functionchecktelephone(cellPhone){ varRegCellPhone=/^([0-9]{11})?$/; falg=cellPhone.search(RegCellPhone); if(falg==-1){ returnfalse; }else{ returntrue; } } //获取URL参数值 functiongetParameter(param){ varquery=window.location.search; variLen=param.length; variStart=query.indexOf(param); if(iStart==-1) return""; iStart+=iLen+1; variEnd=query.indexOf("&",iStart); if(iEnd==-1) returnquery.substring(iStart); returnquery.substring(iStart,iEnd); }
以上代码是小编给大家介绍的js表单验证,代码简单易懂,非常实用,希望对大家有所帮助,同时也非常感谢大家对毛票票网站的支持!