代码改变世界

Fancy Validate 与 jQuery.validate 对比(上):参数及规则

2012-02-12 20:40 by 囧月, ... 阅读, ... 评论, 收藏, 编辑

上一篇简单介绍了一下Fancy Validate,说到Fancy Validate模仿了jQuery.validate,本文来详细罗列一下两者的异同。

对JavaScript Library的依赖

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验证
email 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
email 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更加本地化。