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
【文档目录】
【使用方法】
载入 CSS 文件
rel="stylesheet" href="css/validationEngine.jquery.css"> 载入 JavaScript 文件
src="js/jquery.js">
src="js/jquery.validationEngine-zh_CN.js">
src="js/jquery.validationEngine.js">
给表单加上 ID
id="form_id" ...>
...
给控件添加验证类型
type="text" class="validate[required]">
type="checkbox" class="validate[required]">
class="validate[required]">;
class="validate[required]">
设置验证
// 直接调用
$("#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]] | 验证电话号码 |
| 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] | 验证邮政编码 |
| 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" 是有效。 |
错误信息属性（实验的）
属性值与验证规则相对应
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 格式应为：[email protected]"
data-errormessage="通用的错误提示信息">
| 属性名称 | 对应验证规则 |
|---|---|
| data-errormessage-value-missing |
|
| data-errormessage-type-mismatch |
|
| data-errormessage-pattern-mismatch |
|
| data-errormessage-range-underflow |
|
| data-errormessage-range-overflow |
|
| data-errormessage-custom-error |
|
| 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：提示信息 |
相关信息
作者网站：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
相关文档：Github 中文文档
授权协议：MIT