表单验证类:jquery validate和nice Validator

提要

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