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

参考文档：

官方文档：https://jqueryvalidation.org/documentation/

菜鸟教程：http://www.runoob.com/jquery/jquery-plugin-validate.html

一、Validator对象

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

1.form()

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

示例：

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

2.element( Selector )

扫描二维码关注公众号，回复： 1442068 查看本文章

单个元素校验结果，返回类型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
	}
});