jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。

其官网网址为：https://jqueryvalidation.org/

附最新插件下载地址：https://download.csdn.net/download/qq_23994787/10574637

使用方法

<script th:src="@{/js/jquery.min.js}" type="text/javascript"></script>
<script th:src="@{/js/jquery.validate.min.js}" type="text/javascript"></script>

验证规则

(1)required:true              必输字段
(2)remote:”check.PHP”         使用ajax方法调用check.php验证输入值
(3)email:true                 必须输入正确格式的电子邮件
(4)url:true                   必须输入正确格式的网址
(5)date:true                  必须输入正确格式的日期
(6)dateISO:true               必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true                必须输入合法的数字(负数，小数)
(8)digits:true                必须输入整数
(9)creditcard:                必须输入合法的信用卡号
(10)equalTo:”#field”          输入值必须和#field相同
(11)accept:                   输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5               输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10              输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]        输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
(15)range:[5,10]              输入值必须介于 5 和 10 之间
(16)max:5                     输入值不能大于5
(17)min:10                    输入值不能小于10

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/jquery.js"></script><script src="js/jquery.validate.min.js"></script><script src="js/localization/messages_zh.js"></script><script>$.validator.setDefaults({submitHandler: function() {alert("提交事件!");}});$().ready(function() {// 在键盘按下并释放及提交后验证提交表单$("#signupForm").validate({rules: {firstname: "required",lastname: "required",username: {required: true,minlength: 2},password: {required: true,minlength: 5},confirm_password: {required: true,minlength: 5,equalTo: "#password"},email: {required: true,email: true},"topic[]": {required: "#newsletter:checked",minlength: 2},agree: "required"},messages: {firstname: "请输入您的名字",lastname: "请输入您的姓氏",username: {required: "请输入用户名",minlength: "用户名必需由两个字母组成"},password: {required: "请输入密码",minlength: "密码长度不能小于 5 个字母"},confirm_password: {required: "请输入密码",minlength: "密码长度不能小于 5 个字母",equalTo: "两次密码输入不一致"},email: "请输入一个正确的邮箱",agree: "请接受我们的声明",topic: "请选择两个主题"}});});</script><style>.error {color: red;
}</style>
</head><body><form class="cmxform" id="signupForm" method="get" action=""><fieldset><legend>验证完整的表单</legend><p><label for="firstname">名字</label><input id="firstname" name="firstname" type="text"></p><p><label for="lastname">姓氏</label><input id="lastname" name="lastname" type="text"></p><p><label for="username">用户名</label><input id="username" name="username" type="text"></p><p><label for="password">密码</label><input id="password" name="password" type="password"></p><p><label for="confirm_password">验证密码</label><input id="confirm_password" name="confirm_password" type="password"></p><p><label for="email">Email</label><input id="email" name="email" type="email"></p><p><label for="agree">请同意我们的声明</label><input type="checkbox" class="checkbox" id="agree" name="agree"></p><p><label for="newsletter">我乐意接收新信息</label><input type="checkbox" class="checkbox" id="newsletter" name="newsletter"></p><fieldset id="newsletter_topics"><legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend><label for="topic_marketflash"><input type="checkbox" id="topic_marketflash" value="marketflash" name="topic[]">Marketflash</label><label for="topic_fuzz"><input type="checkbox" id="topic_fuzz" value="fuzz" name="topic[]">Latest fuzz</label><label for="topic_digester"><input type="checkbox" id="topic_digester" value="digester" name="topic[]">Mailing list digester</label><label for="topic" class="error" style="display:none">至少选择两个</label></fieldset><p><input class="submit" type="submit" value="提交"></p></fieldset></form>
</body></html>

定义中文字段

$.extend($.validator.messages, {required: "这是必填字段",remote: "请修正此字段",email: "请输入有效的电子邮件地址",url: "请输入有效的网址",date: "请输入有效的日期",dateISO: "请输入有效的日期 (YYYY-MM-DD)",number: "请输入有效的数字",digits: "只能输入数字",creditcard: "请输入有效的信用卡号码",equalTo: "你的输入不相同",extension: "请输入有效的后缀",maxlength: $.validator.format("最多可以输入 {0} 个字符"),minlength: $.validator.format("最少要输入 {0} 个字符"),rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),max: $.validator.format("请输入不大于 {0} 的数值"),min: $.validator.format("请输入不小于 {0} 的数值")
});

自定义验证规则

addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:

$.validator.addMethod("af", function(value, element, params) {if (value.length > 1) {return false;}if (value >= params[0] && value <= params[1]) {return true;} else {return false;}
}, "必须是一个字母, 且a - f");//用的时候, 比如有个表单字段的id = ”username”, 则在rules中写username: {af: ["a", "f"]
}

方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

submitHandler

//通过验证后运行的函数, 里面要加上表单提交的函数, 否则表单不会提交
$(".selector").validate({submitHandler: function(form) {$(form).ajaxSubmit(); //用Jquery Form的函数}
})

error 错误提示


默认情况是：error.appendTo(element.parent()); 即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {error.appendTo(element.parent());
}
设置错误提示的样式，可以增加图标显示，例如：
input.error {border: 1px solid red;
}
label.error {background: url("/demo/images/unchecked.gif") no-repeat 0px 0px;padding-left: 16px;padding-bottom: 2px;font-weight: bold;color: #EA5200;
}

常用的自定义验证规则

// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {var length = value.length;for (var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length >= param[0] && length <= param[1]);
}, "请确保输入的值在3 - 15个字节之间(一个中文字算2个字节)");// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {var tel = /^d{3,4}-?d{7,9}$/; //电话号码格式010-12345678return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;var tel = /^d{3,4}-?d{7,9}$/;return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");function isIdCardNo(num) {var factorArr = newArray(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1);var parityBit = newArray("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");var varArray = new Array();var intValue;var lngProduct = 0;var intCheckDigit;var intStrLen = num.length;var idNumber = num;// initializeif ((intStrLen != 15) && (intStrLen != 18)) {return false;}// check and set valuefor (i = 0; i < intStrLen; i++) {varArray[i] = idNumber.charAt(i);if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) {return false;} else if (i < 17) {varArray[i] = varArray[i] * factorArr[i];}}if (intStrLen == 18) {//check datevar date8 = idNumber.substring(6, 14);if (isDate8(date8) == false) {return false;}// calculate the sum of the productsfor (i = 0; i < 17; i++) {lngProduct = lngProduct + varArray[i];}// calculate the check digitintCheckDigit = parityBit[lngProduct % 11];// check last digitif (varArray[17] != intCheckDigit) {return false;}} else { //length is 15//check datevar date6 = idNumber.substring(6, 12);if (isDate6(date6) == false) {return false;}}return true;
}function isDate6(sDate) {if (!/^[0-9]{6}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);if (year < 1700 || year > 2500) return falseif (month < 1 || month > 12) returnfalsereturn true
}function isDate8(sDate) {if (!/^[0-9]{8}$/.test(sDate)) {return false;}var year, month, day;year = sDate.substring(0, 4);month = sDate.substring(4, 6);day = sDate.substring(6, 8);var iaMonthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]if (year < 1700 || year > 2500) return falseif (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) iaMonthDays[1] = 29;if (month < 1 || month > 12) returnfalseif (day < 1 || day > iaMonthDays[month - 1]) return falsereturn true
}//身份证号码验证
jQuery.validator.addMethod("idcardno", function(value, element) {return this.optional(element) || isIdCardNo(value);
}, "请正确输入身份证号码");//字母数字
jQuery.validator.addMethod("alnum", function(value, element) {return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和数字");// 汉字
jQuery.validator.addMethod("chcharacter", function(value, element) {var tel = /^[u4e00-u9fa5]+$/;return this.optional(element) || (tel.test(value));
}, "请输入汉字");// 字符最小长度验证（一个中文字符长度为2）
jQuery.validator.addMethod("stringMinLength", function(value, element, param) {var length = value.length;for (var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length >= param);
}, $.validator.format("长度不能小于{0}!"));// 字符最大长度验证（一个中文字符长度为2）
jQuery.validator.addMethod("stringMaxLength", function(value, element, param) {var length = value.length;for (var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 127) {length++;}}return this.optional(element) || (length <= param);
}, $.validator.format("长度不能大于{ 0}!"));// 字符验证
jQuery.validator.addMethod("string", function(value, element) {return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, "不允许包含特殊符号!");// 手机号码验证
jQuery.validator.addMethod("mobile", function(value, element) {var length = value.length;return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, "手机号码格式错误!");// 电话号码验证
jQuery.validator.addMethod("phone", function(value, element) {var tel = /^(d{3,4}-?)?d{7,9}$/g;return this.optional(element) || (tel.test(value));
}, "电话号码格式错误!");// 邮政编码验证
jQuery.validator.addMethod("zipCode", function(value, element) {var tel = /^[0-9]{6}$/;return this.optional(element) || (tel.test(value));
}, "邮政编码格式错误!");// 必须以特定字符串开头验证
jQuery.validator.addMethod("begin", function(value, element, param) {var begin = new RegExp("^"+param);return this.optional(element) || (begin.test(value));
}, $.validator.format("必须以{0}开头!"));// 验证两次输入值是否不相同
jQuery.validator.addMethod("notEqualTo", function(value, element, param) {return value != $(param).val();
}, $.validator.format("两次输入不能相同!"));//验证值不允许与特定值等于
jQuery.validator.addMethod("notEqual", function(value, element, param) {return value != param;
}, $.validator.format("输入值不允许为{0}!"));// 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod("gt", function(value, element, param) {return value > param;
}, $.validator.format(“输入值必须大于{0}!"));

jquery.validate.min.js使用介绍相关推荐

jquery.validate.min.js 插件
1.导入js库: 注意:(在这里我导入的单单是jquery.validate.min.js,没有导入jq的其它,不要忘记哦) <script src="http://static.ru ...
瀑布流效果Demo总结（5）之基于jquery+blocksit.min.js的实现
1.综述最近研究了时下流行的瀑布流展示效果. 当前共计尝试的方法及其优缺点如下: (1)基于JQuery框架及blocksit.min.js实现的瀑布流不连续,每列中多多少少都会有一些位置出现空白. ...
jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...
多语言切换jquery.i18n.min.js
项目需求,切换多语言,采用 jQuery.i18n.min.js文件内容如下 ------------------------------------------------- /*! * jque ...
jquery.placeholder.min.js让你的IE浏览器支持placeholder
2019独角兽企业重金招聘Python工程师标准>>> jquery.placeholder.min.js让你的IE浏览器支持placeholder http://www.ijque ...
异步提交表单插件jquery.form.min.js的使用实例
因为项目中需要达到效果:前台点击按钮弹出文件选择框,选择文件确定之后,上传到后台对文件进行处理并给出响应信息. 尝试过使用$.post,$.ajsx,将表单序列化之后传到后台,但是后台并不能收到文件, ...
jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property ‘style‘ of undefined原因
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 报错: jquery.dataTables.min.js:62 Uncaught TypeError ...
HTML网页使用CDN的jquery.qrcode.min.js生成页面二维码（直接可以复制使用）
HTML页面代码 <!DOCTYPE html> <html> <head><title></title><meta http-equ ...
Qrcode生成二维码之jquery.qrcode.min.js
PHP交流群:294088839, Python交流群:652376983, GO交流群:874512552. jquery-1.8.3_min.js和jquery.qrcode.min.js jq ...

jquery.validate.min.js使用介绍