提要
最近,有人提到jQuery Validation Plugin,甚至有人怀疑 nice Validator 和 这个插件系同一个作者。我好想说,你太有想象力了-。-!jQuery Validation全程的鹰文,nice Validator 全程的Chinese,一个在米国,一个在瓷国,挨不着边儿嘛。以前也接触了一下jQuery Validation,并没有对它的API及使用方式深究,今天脑子突然开了光,想去它官网一探究竟。这一探,于是就有了这篇文章。
在写这篇文章之前,首先做个声明:jQuery Validation是一个优秀的表单验证插件,这篇文章将要拿两款表单验证组件进行比较,旨在加深理解,减少误解,因为我几乎没有使用过该款插件,完全是临时翻阅官方文档,下文中如果有描述不当的地方,欢迎佐证。
API排排站
以下表格中,灰色背景为nice Validator的API,红色背景的参数表示两个插件出现了相同的命名。
参数 |
debug, submitHandle, invalidHandler, ignore, rules, messages, groups, onsubmit, onfocusout, onkeyup, onclick, focusInvalid, focusCleanup, errorClass, validClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, errorMap, errorList, errorPlacement, success, highlight, unhighlight, ignoreTitle |
debug, timely, theme, stopOnError, ignore, rules, messages, fields, groups, valid, invalid, defaultMsg, loadingMsg, formClass, msgClass, msgTemplate, msgIcon, msgArrow, msgShow, msgHide, msgHandler |
方法 |
$.validator.addClassRules() $.validator.setDefaults() $.validator.format() $.validator.addMethod() $form.validate() $form.valid() $input.rules() instance.showErrors() instance.resetForm() instance.numberOfInvalids() instance.form() instance.element() |
$.validator.config(options) $.validator.setTheme(options) $form.validator(options) $input.isValid() instance.destroy() instance.test(element, ruleName) instance.showMsg(element, obj) instance.hideMsg(element, obj) instance.mapMsg(obj) instance.setMsg(obj) instance.setRule(obj) instance.setField( key, field ) |
事件 |
貌似无 |
valid.form invalid.form valid.field invalid.field valid.rule invalid.rule |
从以上表格可以看出:
1、参数:jQuery Validation具有更多的参数,而nice Validator具有更简洁的API
2、方法:两者在方法数量上相当并且提供了不同的功能。前者偏重静态方法,后者偏重实例方法
3、事件:jQuery Validation貌似没有提供事件系统,而nice Validator提供了form、field、rule三个级别的事件
相同参数意义有些不同
1、debug
两者都是用来调试,只不过调试的信息不同
2、ignore
两者具有完全一样的功能
3、rules
这个参数两者就有比较大的区别了。jQuery Validation用这个参数来收集字段的规则,而nice Validator用这个参数来配置具体的规则。
//jQuery Validation 的rules参数用来收集字段规则信息
//要想在传参的时候自定义规则,似乎没有提供这种方法?
$(".selector").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
}
});
//nice Validator 的rules参数用来自定义规则,使用fields来收集字段规则信息
$('form').validator({
rules: {
//自定义验证函数,具有最大的灵活性,没有什么不能验证
myRule: function(el, param, field){
//do something...
},
//简单配置正则及错误消息,及其方便
another: [/^\w*$/, '请输入字母或下划线']
},
fields: {
//调用前面定义的两个规则
foo: 'required; myRule[param]; another'
}
});
4、messages
jQuery Validation用来配置每个字段对应的消息,而nice Validator用来配置每个规则对应的消息
//jQuery Validation的messages同样是配置字段的错误消息
$("form").validate({
rules: {
name: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please specify your name",
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
//nice Validator的messages用来配置规则的错误消息
$('form').validator({
messages: {
required: "请填写该字段",
email: "请检查邮箱格式",
}
});
//并且fields参数中也可以配置错误消息
$('form').validator({
messages: {
required: "请填写该字段"
},
fields: {
name: 'required',
email: {
rules: 'required;email;',
msg: {
email: "请检查邮箱格式"
}
}
});
5、groups
jQuery Validation用来组合多个规则为一个新的规则名,而nice Validator用来将多个字段耦合起来,实现验证组中的每一个字段都触发这个组的回调
//jQuery Validation的groups用来组合多个规则为一个新的规则名
$("#myform").validate({
groups: {
username: "fname lname"
},
errorPlacement: function(error, element) {
if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
error.insertAfter("#lastname");
} else {
error.insertAfter(element);
}
}
});
//nice Validator的groups用来将多个字段耦合起来,
//实现验证组中的每一个字段都触发这个组的回调
$("#myform").validator({
groups: [{
fields: 'mobile tel',
callback: function($elements){
var me = this, count = 0;
$elements.map(function(){
if (me.test(this, 'required')) count+=1;
});
return count>=1 || '请填写手机号或者座机号';
},
target: '#msg_holder'
}]
});
两个插件实现相同的功能
1、参数对应
|
jQuery Validation |
nice Validator |
表单验证通过 | submitHandle |
valid |
表单验证不通过 | invalidHandler |
invalid |
2、方法对应
|
jQuery Validation |
nice Validator |
配置全局默认参数 | $.validator.setDefaults(options) |
$.validator.config(options) |
添加全局规则 | $.validator.addMethod(ruleName, rule) |
$.validator.config(options
)
|
初始化调用 |
$form.validate(options) |
$form.validator(options) |
表单是否验证通过 | $form.valid() 或者 instance.form() |
$form.isValid() |
字段是否验证通过 | instance.element() |
$input.isValid() |
更新字段规则 | $input.rules("add", ruleObj) $input.rules("remove", ruleName) |
instance.setField(name, obj) |
根据传入的name/msg对象 将错误消息全部显示出来 |
instance.showErrors(obj) |
instance.mapMsg(obj) |
错误数 | instance.numberOfInvalids() |
$form.find(':input[data-inputstatus="error"]').length |
重置表单验证 | instance.resetForm() |
$form.triggerHandler('reset') |
来源:oschina
链接:https://my.oschina.net/u/239905/blog/149557