参考文档:
官方文档: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 )
单个元素校验结果,返回类型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}
// {0}会被minlength: 4的4替代
$('#formId').validate({
rules: {
pwd: {
required: true,
minlength: 4
}
},
messages: {
pwd: {
required: "密码不能为空",
minlength: $.validator.format("密码至少{0}位!")
},
},
...
})
// 校验模板,若所有校验的错误信息格式一致,则可以使用以下方法
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
}
});