JS表单验证的代码(常用)

时间:2021-05-26

最近没有项目做,有点空余时间,小编把日常比较常用的js表单验证代码整理分享到平台,供大家学习,需要的朋友参考下吧!

注册验证:

<script language="JavaScript" src="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=/^\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\">&nbsp;<\/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\">&nbsp;<\/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为正则表达式必选项      //返回值:如果能匹配则返回结果数组,如果不能匹配返回nullif (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\">&nbsp;<\/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\">&nbsp;<\/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=/^\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\">&nbsp;<\/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\">&nbsp;<\/i>该密码可用");}return flag;}//验证确认密码function vailConfirmPwd(){var confirmPassword = jQuery("#confirm_password").val();var patrn=/^\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\">&nbsp;<\/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\">&nbsp;<\/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\">&nbsp;<\/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\">&nbsp;<\/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\">&nbsp;<\/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\">&nbsp;<\/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 id="demo" 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" onclick="myFunction()">点击这里</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表单验证,代码简单易懂,非常实用,希望对大家有所帮助,同时也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章