继上一篇简单介绍了一下Fancy Validate,说到Fancy Validate模仿了jQuery.validate,本文来详细罗列一下两者的异同。
jQuery.validate是jQuery的插件,自然依赖于jQuery;而Fancy Validate不依赖于任何Javascript Library,也因此文件小了很多。
参数配置
以下列出对两者对一些参数的支持情况:
| 参数名称 | Fancy Validate | jQuery.validate | 说明 |
| rules | yes | yes | 定义验证的规则 |
| groups | no 自动处理checkbox/radio | yes | 对验证的元素分组 |
| messages | yes | yes | 定义与规则相关的提示信息 |
| ruleKey | yes | no (使用name) | 规则的key对应的表单元素属性 (默认为name) |
| ruleKeyAlter | yes | no | 规则的key对应的表单元素属性 (需要定义额外的不同于ruleKey时) 默认null |
| getKey (element) | yes | no | 自定义获取表单元素对应的规则的key 默认null |
| ruleAttr | yes | yes (通过metadata, 默认使用class) | 从表单元素的属性中获取验证规则 默认为data-val |
| errorCls | yes | yes (参数名为:errorClass) | 验证失败时标签的样式 |
| validCls | yes | yes (参数名为:validClass) | 验证成功时标签的样式 |
| errorElCls | yes | yes (参数名为:errorClass) | 验证失败时表单元素的样式 |
| validElCls | yes | yes (参数名为:success, 值为字符串或函数) | 验证成功时表单元素的样式 |
| activeElCls | yes | no (可以通过绑定事件来实现) | 表单元素获得焦点时的样式 |
| errorElement | yes | yes | 显示提示信息的标签名称 默认为label |
| errorContainer | no (可以自定义显示错误) | yes | 在容器中显示错误 |
| errorLabelContainer | no | yes | |
| interceptInput | yes | no (默认为表单元素绑定了事件) | 在表单元素输入时进行验证 默认true |
| interceptSubmit | yes | yes (参数名称为onsubmit) | 表单提交时触发验证 |
| focusInvalid | yes | yes | 验证失败时为表单元素获得焦点 |
| showErrors | yes | yes | 自定义错误提示的显示 |
| submitHandler | yes | yes | 自定义表单提交 |
| submitRandom | yes | no | 在表单提交时,发送一些随机数 以及停留时间等 |
| autoTab | yes | no | 验证成功时为下一个元素获取焦点 |
| ignore | no (仅在第一次添加规则时遍历所有表单元素) | yes | 忽略某些不元素不进行验证 |
| ignoreTitle | no | yes | 忽略表单元素的title属性 (用于错误提示) |
| appendLabel | yes | yes (参数名为errorPlacement) | 用于把提示信息标签添加到页面上 默认添加到元素之后 |
| findLabel | yes | no (通过selector查找) | 查找已有的提示信息标签 默认查找元素之后的标签 |
| labelText | yes | no (通过jQuery的html函数) | 设置标签的内容 默认设置innerHTML |
| getList (element) | yes | no (通过groups参数) | 获取key相同的元素(checkbox/radio)列表 用于自动分组 |
| highlight (element) | yes | yes | |
| unhighlight (element) | yes | yes |
从以上表格可以看出,两者的参数设置基本上差不多,Fancy Validate简化了一些参数,但因为没有内置的selector,又添加了一些参数用于提示信息的呈现。
内置的规则
以下列出内置规则的支持情况(fancyValidate.min.js vs jquery.validate.min.js):
| 规则名称 | Fancy Validate | jQuery.validate | 说明 |
| required | yes | yes | 必填 |
| compareTo | yes | yes (规则名称为equalTo) | 与其他表单元素的值相等 如compareTo:"pwd" |
| pattern | yes | no | 正则表达式 如pattern:"^abc$" pattern:/^abc$/ |
| fn | yes | no | 函数;函数名称、函数 fn:"fn1" fn:function(value,element,param){...} (第二种方式仅支持在代码中定义) |
| minlength | yes | yes | 最小长度 |
| maxlength | yes | yes | 最大长度 |
| rangelength | yes | yes | 长度范围 |
| min | yes | yes | 最小值 |
| max | yes | yes | 最大值 |
| range | yes | yes | 值范围 |
| numeric | yes | yes (规则名称为number) | 数字类型(包括小数) |
| digit | yes | yes (规则名称为digits) | 整数 |
| prefix | yes | no | 前缀,如以"u_"开头 |
| suffix | yes | yes (规则名称为accept 参数为正则表达式) | 后缀,如以"_d"结尾 |
| equal | yes | no | 相等,如与"abc"相等 |
| remote | no | yes | 通过ajax验证 |
| no | yes | 邮箱格式 | |
| url | no | yes | 网址 |
| date | no | yes | 日期 |
| dateISO | no | yes | 日期 |
附加的验证规则
以下列出附加的验证规则支持情况(fancyValidate.additional.min.js vs additional-methods.min.js):
| 参数名称 | Fancy Validate | jQuery.validate | 说明 |
| ajax | yes | no | ajax验证 以POST方式向服务器端发送一个参数 "element的ruleKey=element的value"字符串, 再验证返回结果是否等于1 (实现比较粗糙) 如name=123 |
| yes | yes | 邮箱格式 | |
| url | yes | yes | 网址 |
| phone | yes | no | 电话(区号、分机可选) |
| mobile | yes | no | 手机 |
| ipv4 | yes | yes | ip地址(ipv4) |
| ipv6 | no | yes | ipv6 |
| date | yes | yes (有多个date规则) | 日期 |
| time | yes | yes | 时间 |
| zipcode | yes | no | 邮编 |
| idcard | yes | no | 身份证号码 |
| compressed | yes | no | 压缩包格式 |
| picture | yes | no | 图片格式 |
| chinese | yes | no | 中文 |
| pattern | no | yes | 正则表达式 |
| maxWords | no | yes | 最多字数 |
| minWords | no | yes | 最少字数 |
| rangeWords | no | yes | 字数范围 |
| nowhitespace | no | yes | 非空白 |
还有一些米国的电话、信用卡不罗列,通过以上表格可以发现Fancy Validate更加本地化。