jQuery Validation Engine 表单验证

转载至：http://code.ciaoca.com/jquery/validation_engine/

功能强大的 jQuery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。

兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+

版本：: jQuery v1.7+; jQuery Validation Engine v2.6.2

注意事项：: 相对 2.2.4 的版本也有较大改动，插件升级请检查原程序; Validation Engine 2.2.4 中文文档

相对 2.2.4 版本的一些区别：: 部分参数功能发生变化；; 输入控件可以不写 id 属性；; 参数 onSuccess 和 onFailure 改为只在表单提交时触发；; 验证规则 past[date]（过去）与 future[date]（未来）对调；; API 接口验证控件均使用 "validate"，移除 "validateField"；; API 接口隐藏提示均使用 "hide" 移除 "hidePrompt"，保留 "hideAll"。

Ciaoca 中文增强版：: 根据中文字体优化样式; 增加多款验证样式; 增加针对中文的验证规则; 移除无用的验证规则示例; 修复 IE8 以下的支持（错误：对象不支持“indexOf”属性或方法）

查看 Demo

修改版：jQuery Validation Engine v2.6.2 By Ciaoca

原　版：jQuery Validation Engine v2.6.2

【文档目录】

使用方法
验证类型列表
options 参数列表
HTML5 属性
API 接口
自定义事件

【使用方法】

载入 CSS 文件

<link rel="stylesheet" href="css/validationEngine.jquery.css">

载入 JavaScript 文件

<script src="js/jquery.js"></script>
<script src="js/jquery.validationEngine-zh_CN.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<!-- jquery.validationEngine-zh_CN.js 为配置文件，可根据需求自行调整或增加，也可以更换为其他语言配置文件 -->

给表单加上 ID

<!-- ID 须设置在 form 标签中 -->
<form id="form_id" ...>
...
</form>

给控件添加验证类型

<!--  验证规则默认使用 class 属性  validate[required] 表示该项必须填写  -->
<input type="text" class="validate[required]">
<input type="checkbox" class="validate[required]">
<select class="validate[required]"></select>;
<textarea class="validate[required]"></textarea>

设置验证

// 直接调用
$("#form_id").validationEngine(); // 自定义参数调用
$("#form_id").validationEngine("attach",{ promptPosition:"centerRight", scroll:false
});

支持链式操作

$("#form_id").validationEngine().css({border:"2px solid #000"});

【验证类型】

注：验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,)分割。

例：validate[required,minSize[6],custom[onlyLetterNumber]]

名称	示例	说明
required	validate[required]	表示必填项
groupRequired[name]	validate[groupRequired[grp]]	在验证组为 grp 的群组，中至少输入或选择一项
condRequired[name]	validate[condRequired[ids]]	当 ids 的某个控件不为空时，那么该控件也为必填项。可以依赖多项，如：validate[condRequired[id1,id2]][Demo]
minSize[int]	validate[minSize[6]]	最少输入字符数
maxSize[int]	validate[maxSize[20]]	最多输入字符数
min[int]	validate[min[1]]	最小值（该项为数字的最小值，注意与 minSize 的区分）
max[int]	validate[max[9999]]	最大值（该项为数字的最大值，注意与 maxSize 的区分）
minCheckbox[int]	validate[minCheckbox[2]]	最少选取的项目数（用于 Checkbox）
maxCheckbox[int]	validate[maxCheckbox[2]]	最多选取的项目数（用于 Checkbox）
date	validate[custom[date]]	验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat	validate[custom[dateFormat]]	验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat	validate[custom[dateTimeFormat]]	验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM\|PM
dateRange[name]	validate[dateRange[grp1]]	验证 grp1 的值是否符合日期范围（开始日期与结束日期）根据控件的前后位置，如果当前控件在 grp1 元素之后，输入的日期不能是 grp1 日期的过去。如果当前控件在 grp1 控件之前，输入的日期不能是 grp1 日期的未来。[Demo]
dateTimeRange[name]	validate[dateTimeRange[grp1]]	验证日期及时间范围，增加了时间的对比，其他的和 dateRange 一样。
past[date]	validate[past[2012/12/20]]	日期必需是 date 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[date]	validate[future[now]]	日期必须是 data 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
equals	validate[equals[id]]	当前控件的值需与控件 id 的值相同
number	validate[custom[number]]	验证数字
integer	validate[custom[integer]]	验证整数
phone	validate[custom[phone]]	验证电话号码
email	validate[custom[email]]	验证 E-mail 地址
url	validate[custom[url]]	验证 url 地址，需以 http://、https:// 或 ftp:// 开头
ipv4	validate[custom[ipv4]]	验证 ipv4 地址
onlyNumberSp	validate[custom[onlyNumberSp]]	只接受填数字和空格
onlyLetterSp	validate[custom[onlyLetterSp]]	只接受填英文字母、单引号（'）和空格
onlyLetterNumber	validate[custom[onlyLetterNumber]]	只接受数字和英文字母
custom[其他规则]	validate[custom[ruleName]]	自定义规则验证 "ruleName":{ "regex":/正则表达式/, "alertText":"验证不通过时的提示信息" }
ajax	validate[ajax[ajaxName]]	自定义 ajax 验证 "ajaxName":{ "url":"phpajax/ajaxValidateFieldUser.php", /验证程序地址/ "extraData":"name=eric", /额外参数/ "alertTextOk":"验证通过时的提示信息", "alertText":"验证不通过时的提示信息", "alertTextLoad":"正在验证时的提示信息" } 传输方式：get 传递参数："fieldId=" + field.attr("id") + "&fieldValue=" + field.val() + "&extraData=" + extraData 返回数据格式：json 返回数据内容：[String,Boolean] 第一个值类型为 String，是接收到 fieldId 的值；第二个值类型为 Boolean，验证通过返回 true，不通过返回 false 具体请参考 [Demo]
funcCall	validate[funcCall[functionName]]	调用外部函数验证 functionName(field, rules, i, options)

Ciaoca 增强版增加验证规则：

名称	示例	说明
chinese	validate[chinese]	只接受中文汉字
chinaId	validate[chinaId]	验证身份证号码（仅支持 18 位的身份证号码）
chinaIdLoose	validate[chinaIdLoose]	验证身份证号码（支持 15 及 18 位的身份证号码）
chinaZip	validate[chinaZip]	验证邮政编码
qq	validate[qq]	验证 QQ 号码

【options 参数说明】

名称	默认值	说明
validationEventTrigger	"blur"	触发验证的事件，支持事件可参考 jQuery 的事件说明。 PS：如果希望只在表单提交时验证，可以设置为空。或者设置参数 binded:false
binded	true	是否绑定即时验证
scroll	true	屏幕自动滚动到第一个验证不通过的位置。
focusFirstField	true	验证未通过时，是否给第一个不通过的控件获取焦点。
validateNonVisibleFields	false	是否验证不可见的元素（如多个输入控件在选项卡切换中）
showPrompts	true	是否显示提示信息
showArrow	true	是否显示提示信息的箭头
promptPosition	"topRight"	提示信息的位置，可设置为："topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline" 可设置更具体的位置，格式为："方向:X偏移值,Y偏移值"。如：bottomLeft:-20,5
autoPositionUpdate	false	是否自动调整提示层的位置
autoHidePrompt	false	是否自动隐藏提示信息
autoHideDelay	100000	自动隐藏提示信息的延迟时间（单位：ms）
fadeDuration	0.3	隐藏提示信息淡出的时间
addPromptClass	""	给提示信息增加 class Ciaoca 增强版中，增加样式如下： "formError-noArrow" -- 无箭头样式 "formError-text" -- 纯文字样式 "formError-small" -- 精简版样式 "formError-white" -- 白色版样式可以叠加使用，如：addPromptClass:"formError-noArrow formError-small"
custom_error_messages	{}	自定义错误信息内容 [Demo]
maxErrorsPerField	false	单个元素显示错误提示的最大数量，值设为数值。默认 false 表示不限制。
showOneMessage	false	是否只显示一个提示信息
doNotShowAllErrosOnSubmit	false	在提交表单时不显示所有的错误信息（建议使用参数 showOneMessage 替代）
addSuccessCssClassToField	""	验证通过时，给控件增加 class，当再次验证失败时，会去除。
addFailureCssClassToField	""	验证失败时，给控件增加 class，当再次验证通过时，会去除。
prettySelect	false	是否使用了美化过的 select 选择控件 [Demo]
onFieldSuccess	false	控件验证通过时的回调函数 function(field)
onFieldFailure	false	控件验证失败时的回调函数 function(field)
onSuccess	false	在表单验证结果为通过时的回调函数
onFailure	false	在表单验证结果为失败时的回调函数 PS：onSuccess 和 onFailure 请参考 [Demo]
onValidationComplete	false	表单提交验证完成时的回调函数 [Demo] function(form, valid)，参数： form：表单元素 valid：验证结果（ture or false） PS：使用此方法后，表单即使验证通过也不会进行提交，交给定义的回调函数进行操作。
ajaxFormValidation	false	是否使用 Ajax 提交表单（默认使用 GET 方式发送数据）
ajaxFormValidationURL	false	设置 Ajax 提交的 URL，默认使用 form 的 action 属性
ajaxFormValidationMethod	"get"	设置 Ajax 提交时，发送数据的方式
onAjaxFormComplete	$.noop	表单提交，Ajax 验证完成后的行为（Function）[Demo] function(status, form, json, options)
onBeforeAjaxFormValidation	$.noop	表单提交验证通过后，Ajax 提交之前的回调函数 [Demo] function(form, options)
ajaxValidCache	{}
isError	false
InvalidFields	[]
isOverflown	false	表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll） PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入；　　此时需要在控件外层再套一个元素，并设置 class="inputContainer"
overflownDIV	""	设置了溢出滚动的元素，格式为 jQuery 的选择器。
usePrefix	""	使用 ID 前缀
useSuffix	""	使用 ID 后缀
validateAttribute	"class"	存放验证规则的属性
bindMethod	"bind"
inlineAjax	false

【HTML5 属性】

属性名称	说明
data-validation-engine	设置验证规则除了使用 class 设置验证规则外，也可以使用该属性来设置验证规则。
data-validation-placeholder	占位符当位置为必填的控件验证时，值不能为空，也不能为占位符。
data-prompt-position	自定义提示信息的位置，可设置为："topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline" 可设置更具体的位置，格式为："方向:X偏移值,Y偏移值"。如：data-prompt-position="bottomLeft:20,5" PS：偏移值可以为负数
data-prompt-target	载入提示信息的容器，值为元素的 id 仅在 promptPosition 或 data-prompt-position 设为 "inline" 是有效。

错误信息属性（实验的）

属性值与验证规则相对应

<!-- 自定义错误信息属性（实验支持） -->
<input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" data-errormessage-value-missing="E-mail 不能为空"  data-errormessage-custom-error="E-mail 格式应为：someone@nowhere.com"  data-errormessage="通用的错误提示信息">

属性名称	对应验证规则
data-errormessage-value-missing	required groupRequired condRequired
data-errormessage-type-mismatch	past future dateRange dateTimeRange
data-errormessage-pattern-mismatch	creditCard equals
data-errormessage-range-underflow	minSize min minCheckbox
data-errormessage-range-overflow	maxSize max maxCheckbox
data-errormessage-custom-error	custom ajax funcCall
data-errormessage	通用的错误提示信息

【API 接口】

名称	示例	说明
attach	$("#form_id").validationEngine("attach");	注册表单验证事件
detach	$("#form_id").validationEngine("detach");	取消注册表单验证事件
validate	alert($("#id").validationEngine("validate"));	验证控件或表单，返回结果 true 或 false
showPrompt	$("#id").validationEngine("showPrompt","提示内容","load");	在该元素上创建一个提示，3 种状态："pass", "error", "load"
hide	$("#id").validationEngine("hide");	隐藏改元素及元素内的提示
hideAll	$("#id").validationEngine("hideAll");	隐藏页面上的所有提示
updatePromptsPosition	$("#form_id").validationEngine("updatePromptsPosition")	更新提示层的位置

【自定义事件】

插件增加的自定义事件，可参考 [Demo]

名称	示例	说明
jqv.form.validating	$("#form_id").bind("jqv.form.validating",function(event){...});	表单验证时
jqv.form.result	$("#form_id").bind("jqv.form.result",function(event,errorFound){...});	表单验证完成。返回参数说明： errorFound：表单是否通过验证（true 或 false）
jqv.field.result	$("#field_id").bind("jqv.field.result",function(event,field,isError,promptText){...});	单个控件验证完成。返回参数说明： field：控件对象 isError：控件是否通过验证（true 或 false） promptText：提示信息

名称

示例

说明

jqv.form.validating

$("#form_id").bind("jqv.form.validating",function(event){...});

表单验证时

jqv.form.result

$("#form_id").bind("jqv.form.result",function(event,errorFound){...});

表单验证完成。返回参数说明：

errorFound：表单是否通过验证（true 或 false）

jqv.field.result

$("#field_id").bind("jqv.field.result",function(event,field,isError,promptText){...});

单个控件验证完成。返回参数说明：

field：控件对象

isError：控件是否通过验证（true 或 false）

promptText：提示信息