最近没有项目做，有点空余时间，小编把日常比较常用的js表单验证代码整理分享到脚本之家平台，供大家学习，需要的朋友参考下吧！
注册验证：
<script language="JavaScript" src="https://www.jb51.net/js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = 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(); } //验证昵称 function vailNickName(){ var nickName = jQuery("#nickName").val(); var flag = false; var message = ""; var patrn=https://www.jb51.net/^\d+$/; var length = getNickNameLength(); if(nickName == ''){ message = "昵称不能为空！"; }else if(length<4||length>16){ message = "昵称为4-16个字符！"; } else if(checkNickNameIsExist()){ message = "该昵称已经存在，请重新输入！"; }else{ flag = true; } if(!flag){ jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#nickName").focus(); }else{ jQuery("#nickNameDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#nickNameP").html(""); jQuery("#nickNameP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该昵称可用"); } return flag; } //计算昵称长度 function getNickNameLength(){ var nickName = jQuery("#nickName").val(); var len = 0; for (var i = 0; i < nickName.length; i++) { var a = nickName.charAt(i); //函数格式：stringObj.match(rgExp) stringObj为字符串必选 rgExp为正则表达式必选项 //返回值：如果能匹配则返回结果数组，如果不能匹配返回null if (a.match(/[^\x00-\xff]/ig) != null){ len += 2; }else{ len += 1; } } return len; } //验证昵称是否存在 function checkNickNameIsExist(){ var nickName = jQuery("#nickName").val(); var flag = false; jQuery.ajax( { url: "checkNickName?t=" + (new Date()).getTime(), data:{nickName:nickName}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //验证手机号 function vailPhone(){ var phone = jQuery("#phone").val(); var flag = false; var message = ""; //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/; var myreg = /^(((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 = "手机号码不能为空！"; }else if(phone.length !=11){ message = "请输入有效的手机号码！"; }else if(!myreg.test(phone)){ message = "请输入有效的手机号码！"; }else if(checkPhoneIsExist()){ message = "该手机号码已经被绑定！"; }else{ flag = true; } if(!flag){ jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#phone").focus(); }else{ jQuery("#phoneDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#phoneP").html(""); jQuery("#phoneP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该手机号码可用"); } return flag; } //验证手机号是否存在 function checkPhoneIsExist(){ var phone = jQuery("#phone").val(); var flag = true; jQuery.ajax( { url: "checkPhone?t=" + (new Date()).getTime(), data:{phone:phone}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "0"){ flag = false; } } }); return flag; } //验证密码 function vailPwd(){ var password = jQuery("#password").val(); var flag = false; var message = ""; var patrn=https://www.jb51.net/^\d+$/; if(password ==''){ message = "密码不能为空！"; }else if(password.length<6 || password.length>16){ message = "密码6-16位！"; }else if(patrn.test(password)){ message = "密码不能全是数字！"; }else{ flag = true; } if(!flag){ jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#password").focus(); }else{ jQuery("#passwordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#passwordP").html(""); jQuery("#passwordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该密码可用"); } return flag; } //验证确认密码 function vailConfirmPwd(){ var confirmPassword = jQuery("#confirm_password").val(); var patrn=https://www.jb51.net/^\d+$/; var password = jQuery("#password").val(); var flag = false; var message = ""; if(confirmPassword == ''){ message = "请输入确认密码！"; }else if(confirmPassword != password){ message = "二次密码输入不一致，请重新输入！"; }else if(patrn.test(password)){ message = "密码不能全是数字！"; }else { flag = true; } if(!flag){ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#confirm_password").focus(); }else{ jQuery("#confirmPasswordDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#confirmPasswordP").html(""); jQuery("#confirmPasswordP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>密码正确"); } return flag; } //验证邮箱 function vailEmail(){ var email = jQuery("#email").val(); var flag = false; var message = ""; var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(email ==''){ message = "邮箱不能为空！"; }else if(!myreg.test(email)){ message = "请输入有效的邮箱地址！"; }else if(checkEmailIsExist()){ message = "该邮箱地址已经被注册！"; }else{ flag = true; } if(!flag){ jQuery("#emailDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#emailP").html(""); jQuery("#emailP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#email").focus(); }else{ jQuery("#emailDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#emailP").html(""); jQuery("#emailP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>该邮箱可用"); } return flag; } //验证邮箱是否存在 function checkEmailIsExist(){ var email = jQuery("#email").val(); var flag = false; jQuery.ajax( { url: "checkEmail?t=" + (new Date()).getTime(), data:{email:email}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //验证验证码 function vailCode(){ var randCode = jQuery("#randCode").val(); var flag = false; var message = ""; if(randCode == ''){ message = "请输入验证码！"; }else if(!checkCode()){ message = "验证码不正确！"; }else{ flag = true; } if(!flag){ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-error"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<i class=\"icon-error ui-margin-right10\"> <\/i>"+message); //jQuery("#randCode").focus(); }else{ jQuery("#randCodeDiv").removeClass().addClass("ui-form-item has-success"); jQuery("#randCodeP").html(""); jQuery("#randCodeP").html("<i class=\"icon-success ui-margin-right10\"> <\/i>"); } return flag; } //检查随机验证码是否正确 function checkCode(){ var randCode = jQuery("#randCode").val(); var flag = false; jQuery.ajax( { url: "checkRandCode?t=" + (new Date()).getTime(), data:{randCode:randCode}, dataType:"json", type:"GET", async:false, success:function(data) { var status = data.status; if(status == "1"){ flag = true; } } }); return flag; } //判断是否选中 function vailAgree(){ if(jQuery("#agree").is(":checked")){ return true; }else{ alert("请确认是否阅读并同意XX协议"); } return false; } function delHtmlTag(str){ var str=str.replace(/<\/?[^>]*>/gim,"");//去掉所有的html标记 var result=str.replace(/(^\s+)|(\s+$)/g,"");//去掉前后空格 return result.replace(/\s/g,"");//去除文章中间空格}<!DOCTYPE html><html><body><h1>我的第一段 JavaScript</h1><p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p><input type="text"><script>function myFunction(){var x=document.getElementById("demo").value;if(x==""){ alert("输入不能为空"); return;}if(isNaN(x)){ alert("请输入数字"); return;}if(x.length!=6){ alert("请输入6位数字"); return;}}</script><button type="button">点击这里</button></body></html> //验证密码为数字字母下划线 function CheckPwd(pwd) { var validStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_~/!@#$%^&*();-+.=,"; for (i = 0; i < pwd.length; i++) { if (validStr.indexOf(pwd.charAt(i)) == -1) { return false; } } return true; } //验证邮箱格式 function checkemail(email) { var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; if (!filter.test(email)) { return false; } return true; } function isEmail(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); } ///手机号码验证 function checktelephone(cellPhone) { var RegCellPhone = /^([0-9]{11})?$/; falg = cellPhone.search(RegCellPhone); if (falg == -1) { return false; } else { return true; } } //获取URL参数值 function getParameter(param) { var query = window.location.search; var iLen = param.length; var iStart = query.indexOf(param); if (iStart == -1) return ""; iStart += iLen + 1; var iEnd = query.indexOf("&", iStart); if (iEnd == -1) return query.substring(iStart); return query.substring(iStart, iEnd); }
以上代码是小编给大家介绍的js表单验证，代码简单易懂，非常实用，希望对大家有所帮助，同时也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: