jQuery Validate（5） - Validator对象及常用静态方法

爱被打了一巴掌 2021-06-26 16:06 494阅读 0赞

## 一、`Validator`对象 ##

`validate( [options] )`返回一个`Validator`对象，有一些公共方法可以用来程序中触发校验以及改变表单内容。`Validator`有很多方法，只简单介绍以下这几个。

### 1.`form()` ###

表单校验结果，返回类型`Boolean`；该方法类似于`$('#formId').valid()`

示例：

var validator = $('#formId').validate({  ... });
        validator.form(); // true | false

### 2.`element( Selector )` ###

单个元素校验结果，返回类型`Boolean`，该方法也类似于`$('#username').valid()`

var validator = $('#formId).validate( { ...} );
        validator.element($('#username')); // true | false

### 3.`resetForm()` ###

重置表单校验结果

var validator = $('#formId').validate( { ...} );
        validator.resetForm();

### 4.`showErrors(errors)` ###

设置元素提示信息，参数：`Object`，一个或多个 `name`：信息 键值对

示例：

validator.showErrors({ 
        	'username': '用户名错误'
        });

### 5.`numberOfInvalids()` ###

未通过校验元素个数

示例：

var validator = $('#formId').validate({ 
        	...
        	// 提交表单时，若有元素未通过，则输出
        	invalidHandler: function() { 
        		console.log(validator.numberOfInvalids() + " 个元素未通过校验");
        	}
        	...
        });

### 6.`destroy()` ###

销毁`validator`实例，此时无法再执行校验操作

## 二、常用的静态方法 ##

### 1.`$.validator.addMethod()` ###

自定义校验规则，建议在 `additional-methods.js` 文件中添加（也可在`jquery.validate.js`中添加）

参数说明：

addMethod(name, method, message)

*  `name`：规则名称
 *  `method(value, element, param)`：value：输入的值，element：校验的标签，param：规则内容
 *  `message`：提示信息

示例：

// 扩展验证（邮政编码) 
        $("#formId").validate({   
            rules: {   
                postcode: {   
                    postcode: true  
                }  
            },  
            messages: {   
                postcode: {   
                    postcode: '邮编格式不正确'  
                }  
            }  
            ...  
        });  
          
        // 建议在additional-method.js中添加 
        $.validator.addMethod("postcode", function(value, element, param) {   
            var tel = /^[0-9]{6}$/;  
            return this.optional(element) || (tel.test(value));   
        }, "请正确填写您的邮政编码");

### 2.`$.validator.format()` ###

格式化输出

参数说明：

format(template, arg0, ..., argN)

*  `template`：模板，可以使用\{n\}占位，n从0开始
 *  `arg0,..,argN`：0或多个参数，代替模板中的$\{n\}

示例1：

// {0}会被minlength: 4的4替代
        $('#formId').validate({ 
        	rules: { 
        		pwd: { 
        			required: true,
        			minlength: 4
        		}
        	},
        	messages: { 
        		pwd: { 
        			required: "密码不能为空",
        			minlength: $.validator.format("密码至少{0}位!")
        		},
        	},
        	...
        })

示例2：

// 校验模板，若所有校验的错误信息格式一致，则可以使用以下方法
        var template = $.validator.format("{0} 非有效值");
        // 结果：abc非有效值
        alert(template("abc"));

### 3.`$.validator.setDefaults(options)` ###

默认配置，`options`配置参数与`validate(options)`方法类似，对当前页面所有表单有效。常用于设置`debug`模式，错误元素放置位置`errorPlacement`等

示例：

// 为所有表单校验设置debug
        $.validator.setDefaults({ 
        	debug: true
        });

### 4.`$.validator.addClassRules()` ###

添加组合规则，用户将常用的规则组合在一起

*  `addClassRules(name, rules)`：单个组合规则，name：规则名称，rules：组合规则
 *  `addClassRules(rules)`：多个组合规则

示例：

// 单个组合规则，规则名称：username
        $.validator.addClassRules('username', { 
        	required: true,
        	minlength: 4
        });
        // 多个组合规则
        $.validator.addClassRules({ 
        	username: { 
            		required: true,
            		minlength: 4
        	},
        	pwd: { 
            		required: true,
            		maxlength: 6
        	}
        });