jQuery validate表单验证插件

雨点打透心脏的1/2处 2021-09-28 05:00 473阅读 0赞

官网地址：[https://jqueryvalidation.org][https_jqueryvalidation.org]  
cdn：

### 文章目录 ###

*   *  默认基础校验规则
     *   *  示例
     *  修改默认配置
     *  核心方法
     *   *  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.][required _ Makes the element required.]
 *  [remote – Requests a resource to check the element for validity.][remote _ Requests a resource to check the element for validity.]
 *  [minlength – Makes the element require a given minimum length.][minlength _ Makes the element require a given minimum length.]
 *  [maxlength – Makes the element require a given maximum length.][maxlength _ Makes the element require a given maximum length.]
 *  [rangelength – Makes the element require a given value range.][rangelength _ Makes the element require a given value range.]
 *  [min – Makes the element require a given minimum.][min _ Makes the element require a given minimum.]
 *  [max – Makes the element require a given maximum.][max _ Makes the element require a given maximum.]
 *  [range – Makes the element require a given value range.][range _ Makes the element require a given value range.]
 *  [step – Makes the element require a given step.][step _ Makes the element require a given step.]
 *  [email – Makes the element require a valid email][email _ Makes the element require a valid email]
 *  [url – Makes the element require a valid url][url _ Makes the element require a valid url]
 *  [date – Makes the element require a date.][date _ Makes the element require a date.]
 *  [dateISO – Makes the element require an ISO date.][dateISO _ Makes the element require an ISO date.]
 *  [number – Makes the element require a decimal number.][number _ Makes the element require a decimal number.]
 *  [digits – Makes the element require digits only.][digits _ Makes the element require digits only.]
 *  [equalTo – Requires the element to be the same as another one.][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.][validate_ _ Validates the selected form.]
 *  [valid() – Checks whether the selected form or selected elements are valid.][valid_ _ Checks whether the selected form or selected elements are valid.]
 *  [rules() – Read, add and remove rules for an element.][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 #####

等效于

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 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]  
添加规则

jQuery("#form1").validate({ 
    				rules: { 
    					name1: "required"
    				}
    			});			
    			
    			jQuery("[name='name1']").rules("add", { 
    				maxlength: 5
    			});
    			
    			console.log(jQuery("[name='name1']").rules());

输出

{required: true, maxlength: 5}

#### remove ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]  
需要特别注意一下这句话`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/][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 \] )

接收三个参数，第一个是校验规则的名字，第二个是校验方法，第三个是提示信息。校验方法有三个参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]

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
    						}
    					}
    					
    				}
    			});

输出  
![在这里插入图片描述][20190311162957505.png]

其中，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");

[https_jqueryvalidation.org]: https://jqueryvalidation.org
[required _ Makes the element required.]: https://jqueryvalidation.org/required-method/
[remote _ Requests a resource to check the element for validity.]: https://jqueryvalidation.org/remote-method/
[minlength _ Makes the element require a given minimum length.]: https://jqueryvalidation.org/minlength-method/
[maxlength _ Makes the element require a given maximum length.]: https://jqueryvalidation.org/maxlength-method/
[rangelength _ Makes the element require a given value range.]: https://jqueryvalidation.org/rangelength-method/
[min _ Makes the element require a given minimum.]: https://jqueryvalidation.org/min-method/
[max _ Makes the element require a given maximum.]: https://jqueryvalidation.org/max-method/
[range _ Makes the element require a given value range.]: https://jqueryvalidation.org/range-method/
[step _ Makes the element require a given step.]: https://jqueryvalidation.org/step-method/
[email _ Makes the element require a valid email]: https://jqueryvalidation.org/email-method/
[url _ Makes the element require a valid url]: https://jqueryvalidation.org/url-method/
[date _ Makes the element require a date.]: https://jqueryvalidation.org/date-method/
[dateISO _ Makes the element require an ISO date.]: https://jqueryvalidation.org/dateISO-method/
[number _ Makes the element require a decimal number.]: https://jqueryvalidation.org/number-method/
[digits _ Makes the element require digits only.]: https://jqueryvalidation.org/digits-method/
[equalTo _ Requires the element to be the same as another one.]: https://jqueryvalidation.org/equalTo-method/
[setDefaults]: https://jqueryvalidation.org/jQuery.validator.setDefaults/
[validate_ _ Validates the selected form.]: https://jqueryvalidation.org/validate/
[valid_ _ Checks whether the selected form or selected elements are valid.]: https://jqueryvalidation.org/valid/
[rules_ _ Read_ add and remove rules for an element.]: https://jqueryvalidation.org/rules/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70]: /images/20210923/8294c5cb18034cdc8da4e92239e184dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 1]: /images/20210923/f69a53bdc02c424d95b8cf678f8c2c40.png
[https_jqueryvalidation.org_jQuery.validator.addMethod]: https://jqueryvalidation.org/jQuery.validator.addMethod/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25heWlfMjI0_size_16_color_FFFFFF_t_70 2]: /images/20210923/6fb4ea061e7d44edb867c99b8734b2cb.png
[20190311162957505.png]: /images/20210923/2f93c678b3854a189bc8409f65021a80.png