jQuery validate表单验证插件
官网地址：https://jqueryvalidation.org
cdn：
<script src="https://code.jquery.com/jquery-1.11.1.min.js">script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js">script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js">script>
文章目录
- 默认基础校验规则
- 示例
- 修改默认配置
- 核心方法
- validate
- debug
- rules
- 例子1
- 例子2
- 例子3
- messages
- 例子1
- submitHandler
- 例子
- invalidHandler
- 例子
- valid
- rules
- rules()
- add
- remove
- jQuery.validator.addMethod()
- 一点额外的语法
Form validation with jQuery
这是官网中的第一句话，所以，这是一套基于form表单所写的验证框架。也就是说，所校验的元素必须位于一个表单内，验证所需的各种参数也是根据form表单存储在内存中的。
说实话，灵活性挺差的。校验元素与form表单并没有直接联系，但是即使确实不需要form表单，也要在外面套一个。同时又由于源码中大量使用了.form以及其他基于form元素的方法，没办法轻易将元素校验与form表单脱离开来。
默认基础校验规则
- required – Makes the element required.
- remote – Requests a resource to check the element for validity.
- minlength – Makes the element require a given minimum length.
- maxlength – Makes the element require a given maximum length.
- rangelength – Makes the element require a given value range.
- min – Makes the element require a given minimum.
- max – Makes the element require a given maximum.
- range – Makes the element require a given value range.
- step – Makes the element require a given step.
- email – Makes the element require a valid email
- url – Makes the element require a valid url
- date – Makes the element require a date.
- dateISO – Makes the element require an ISO date.
- number – Makes the element require a decimal number.
- digits – Makes the element require digits only.
- equalTo – Requires the element to be the same as another one.
示例
html写法
不可为空
<input type="text" id="input1" name="input1" value="" required >
不可为空的另一种写法
<input type="text" name="input11" id="input11" value="" required="true" />
不可为空，并且值在5~10之间
<input type="text" id="input2" value="" required="true" range="[5,10]">
更多的示例可以点击上面的链接查看，注意官方给出的例子都是js的。
修改默认配置
将提示信息改为中文：加载messages_zh.js文件。
修改全局默认参数：setDefaults
核心方法
- validate() – Validates the selected form.
- valid() – Checks whether the selected form or selected elements are valid.
- rules() – Read, add and remove rules for an element.
validate
整个框架最重要的一个方法，是一个万能入口。
用于初始化校验表单的方法。可以向其传入一个对象，来改变默认参数。基本格式是：
$("#myform").validate({
});
其中一些常用的方法。
debug
$("#myform").validate({
debug: true
});
可以设定boolean值。当为true时，表单不会被真正提交，主要用于测试。
rules
用js的方式动态添加校验规则。其中内容为key：value的数组，key是元素的name属性，value是具体的校验规则。
例子1
<input type="text" name="name1" id="name1" value="" required="true"/>
等效于
jQuery("#form1").validate({
rules: {
name1: "required"
}
});
例子2
如果校验规则比较复杂，比如有两个，value可以改为一个对象。
jQuery("#form1").validate({
rules: {
name1: {
required: true,
email: true
}
}
});
上面的例子同时对name为name1的元素添加了非空，以及email格式的校验。
例子3
jQuery("#form1").validate({
rules: {
email1: {
required: {
depends: function(element) {
return 1 == jQuery("#name1").val();
}
}
}
}
});
新加了depends参数，它相当于一个拦截器，在对email1的required校验之前执行。若返回false，则不执行required校验，反之进行。
上述代码的意思是：只在name1的值为1的情况下，则对email1进行非空校验。
messages
自定义提示信息
例子1
jQuery("#form1").validate({
rules: {
name1: "required",
email1: {
required: {
depends: function(element) {
return 1 == jQuery("#name1").val();
}
}
}
}
,messages: {
name1: "asdsd"
}
});
修改name1的提示信息为asdsd
submitHandler
用于在提交之前做些事情，注意当用js代码提交表单时，需要用到参数中的from，否则会重复提交
例子
$("#myform").validate({
submitHandler: function(form) {
// do other things for a valid form
form.submit();
}
});
Use submitHandler to process something and then using the default submit. Note that “form” refers to a DOM element, this way the validation isn’t triggered again.
invalidHandler
校验未通过是触发
例子
$("#myform").validate({
invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();//校验未通过的数量
}
});
validator
Type: Validator
The validator instance for the current form.
关于validator这个参数，官方例子中只列出了这一个例子，其实整个validator对象的原型方法都可以调用（几十个），只是一般没人会这么用
valid
直接校验元素，源码很短，直接发出来了。
valid: function() {
var valid, validator, errorList;
if ( $( this[ 0 ] ).is( "form" ) ) {
valid = this.validate().form();
} else {
errorList = [];
valid = true;
validator = $( this[ 0 ].form ).validate();
this.each( function() {
valid = validator.element( this ) && valid;
if ( !valid ) {
errorList = errorList.concat( validator.errorList );
}
} );
validator.errorList = errorList;
}
return valid;
}
可以看出，这可以算作是validate方法的一个子集，并且还有一个问题，它只能同时对一个表单中的元素进行校验。
valid方法可以由表单对象，或者表单元素对象直接调用。调用后，会在页面上显示错误信息，并且得到一个boolean类型的返回值。
var flag1 = jQuery("#form1").valid();
var flag2 = jQuery("#name1,#input22").valid();
var flag3 = jQuery("#name1").add("#input22").valid();
rules
这是一个用js动态添加规则的方法。
rules: function( command, argument ) {
rules方法有两个参数，第一个参数接收指令（add、remove），第二个参数接收具体的校验规则。
Returns the validations rules for the first selected element or
Adds the specified rules and returns all rules for the first matched element. Requires that the parent form is validated, that is, $( “form” ).validate() is called first or
Removes the specified rules and returns all rules for the first matched element.
There are several ways to specify validation rules.
Validation methods with parameters can be specified as attributes (recommended)
Validation methods without parameters can be specified as classes on the element
Both can be specified using the rules-option of the validate()-method
Both rules and messages can be specified using data attributes, using data-msg (a generic, not-method specific message), data-msg-[method] and data-rule-[method].
When setting, the rules can also contain a messages-object, specifying custom messages for existing or added rules.
在执行rules方法之前，所使用的element所在的form必须已经调用过了validate()方法，不然可能会出问题。
rules()
无参数，会返回参数上已经设置的规则。
jQuery("#form1").validate({
rules: {
name1: "required",
email1: {
required: {
depends: function(element) {
return 1 == jQuery("#name1").val();
}
},
minlength: 5,
maxlength: 5
}
}
,messages: {
name1: "asdfgh"
}
,invalidHandler: function(event, validator){
console.log(validator.size());
}
});
console.log(jQuery("[name='name1']").rules());
console.log(jQuery("[name='email1']").rules());
输出
{required: true}
{minlength: 5, maxlength: 5}
add
添加规则
jQuery("#form1").validate({
rules: {
name1: "required"
}
});
jQuery("[name='name1']").rules("add", {
maxlength: 5
});
console.log(jQuery("[name='name1']").rules());
输出
{required: true, maxlength: 5}
remove
需要特别注意一下这句话Manipulates only rules specified via rules-option or via rules("add").
因为它的源码是这么写的
case "remove":
if ( !argument ) {
delete staticRules[ element.name ];
return existingRules;
}
只删除了staticRules（除此之外，还有classRules，attributeRules，dataRules），所以它只能删除一部分rules，具体来说就是通过js指定的那些规则。
如果在html中直接指定required="true"，那么这个required规则是无法用remove删除的。
jQuery("[name='name1']").rules("remove"); //删除全部规则
jQuery("[name='name1']").rules("remove", "min max"); //删除指定规则（用空格区分）
jQuery.validator.addMethod()
https://jqueryvalidation.org/jQuery.validator.addMethod/
Description: Add a custom validation method. It must consist of a name (must be a legal javascript identifier), a javascript based function and a default string message.
添加自定义的校验规则。
jQuery.validator.addMethod( name, method [, message ] )
接收三个参数，第一个是校验规则的名字，第二个是校验方法，第三个是提示信息。校验方法有三个参数
jQuery.validator.addMethod("myCustomMethod", function(value, element, params){
console.log(value); //元素的值
console.log(element); //当前元素
console.log(params); //设置的参数
return false; //返回校验结果
}, "my message");
jQuery("#form1").validate({
rules: {
name1: {
required: true,
myCustomMethod: {
a:1,
b:2
}
}
}
});
输出
其中，addMethod方法的第三个参数还可以接收一个jQuery.validator.format，用以输出更准确的信息。
jQuery.validator.addMethod("myCustomMethod", function(value, element, params){
console.log(value); //元素的值
console.log(element); //当前元素
console.log(params); //设置的参数
return false; //返回校验结果
}, jQuery.validator.format("{0} + {1}"));
jQuery("#form1").validate({
rules: {
name1: {
required: true,
myCustomMethod: [111, 222]
}
}
});
最终在页面上会这样输出111 + 222
这种语法要求规则的参数（也就是上面的 [111, 222]）为数组类型，否则会输出一些奇怪的东西。
一点额外的语法
jquery.validator1.19.js中对jQuery的伪类选择器进行了扩展
// Custom selectors
$.extend( $.expr.pseudos || $.expr[ ":" ], { // '|| $.expr[ ":" ]' here enables backwards compatibility to jQuery 1.7. Can be removed when dropping jQ 1.7.x support
// https://jqueryvalidation.org/blank-selector/
blank: function( a ) {
return !$.trim( "" + $( a ).val() );
},
// https://jqueryvalidation.org/filled-selector/
filled: function( a ) {
var val = $( a ).val();
return val !== null && !!$.trim( "" + val );
},
// https://jqueryvalidation.org/unchecked-selector/
unchecked: function( a ) {
return !$( a ).prop( "checked" );
}
} );
调用方法
$("input:blank");