提要
最近，有人提到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') |
转自:https://my.oschina.net/nice/blog/149557
ps:
jquery validate:http://www.runoob.com/jquery/jquery-plugin-validate.html
nice Validator:https://niceue.com/validator/