表单验证：nice Validator 与 jQuery Validation 对比

提要

    最近，有人提到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

从以上表格能够看出：

一、参数：jQuery Validation具备更多的参数，而nice Validator具备更简洁的API
二、方法：二者在方法数量上至关而且提供了不一样的功能。前者偏重静态方法，后者偏重实例方法
三、事件：jQuery Validation貌似没有提供事件系统，而nice Validator提供了form、field、rule三个级别的事件

相同参数意义有些不一样

一、debug

    二者都是用来调试，只不过调试的信息不一样

二、ignore

    二者具备彻底同样的功能

三、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'
    }
});

四、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: "请检查邮箱格式"
            }
    }
});

五、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'
    }]
});

两个插件实现相同的功能

一、参数对应

	jQuery Validation	nice Validator
表单验证经过	submitHandle	valid
表单验证不经过	invalidHandler	invalid

二、方法对应

	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')