表單驗證：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')