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 版本的一些区别：
部分参数功能发生变化；输入控件可以不写 id 属性；参数 onSuccess 和 onFailure 改为只在表单提交时触发；验证规则 past[date]（过去） 与 future[date]（未来） 对调；API 接口验证控件均使用 "validate"，移除 "validateField"；API 接口隐藏提示均使用 "hide" 移除 "hidePrompt"，保留 "hideAll"。
Ciaoca 中文增强版：
根据中文字体优化样式
增加多款验证样式
增加针对中文的验证规则
移除无用的验证规则示例
完善对 IE8 以下浏览器的支持（错误：对象不支持“indexOf”属性或方法）
查看 Demo
原 版：jQuery Validation Engine v2.6.2
修改版：jQuery Validation Engine v2.6.2 By Ciaoca
文档目录
使用方法
验证类型
参数说明
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[string] validate[groupRequired[grp]] 在验证组为 grp 的群组，中至少输入或选择一项
condRequired[string] 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[string] validate[custom[date]] 验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat[string] validate[custom[dateFormat]] 验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat[string] validate[custom[dateTimeFormat]] 验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PM
dateRange[string] validate[dateRange[grp1]] 验证 grp1 的值是否符合日期范围（开始日期与结束日期）
根据控件的前后位置，如果当前控件在 grp1 元素之后，输入的日期不能是 grp1 日期的过去。
如果当前控件在 grp1 控件之前，输入的日期不能是 grp1 日期的未来。[Demo]
dateTimeRange[string] validate[dateTimeRange[grp1]] 验证日期及时间范围，增加了时间的对比，其他的和 dateRange 一样。
past[string] validate[past[2012/12/20]] 日期必需是 date 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[string] validate[future[now]] 日期必须是 data 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
equals[string] 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': RegExp, /* 正则表达式，如果正则能匹配内容表示通过 */
'alertText': '验证不通过时的提示信息'
}
ajax validate[ajax[ajaxName]] 自定义 ajax 验证
'ajaxName': {
'url': 'phpajax/ajaxValidateFieldUser.php', /* 验证程序地址 */
'extraData': 'name=eric', /* 额外参数 */
'alertTextOk': '验证通过时的提示信息',
'alertText': '验证不通过时的提示信息',
'alertTextLoad': '正在验证时的提示信息'
}
/*
* 例：
* <input type="text" id="email" class="validate[ajax[ajaxName]]">
* 假设填写的值为：ciaoca@gmail.com
* extraData 设置为：'type=register&verify=abcd'
* 提交到后端的 url 为：phpajax/ajaxValidateFieldUser.php?email=ciaoca@gmail.com&type=register&verify=abcd
*/
传输方式：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[custom[chinese]] 只接受中文汉字
chinaId validate[custom[chinaId]] 验证身份证号码（仅支持 18 位的身份证号码）
chinaIdLoose validate[custom[chinaIdLoose]] 验证身份证号码（支持 15 及 18 位的身份证号码）
chinaZip validate[custom[chinaZip]] 验证邮政编码
qq validate[custom[qq]] 验证 QQ 号码
参数说明
名称 默认值 说明
validationEventTrigger 'blur' 触发验证的事件，支持事件可参考 jQuery 的事件说明。
PS：如果希望只在表单提交时验证，可以设置为空。或者设置参数 binded:false
binded true 是否绑定即时验证
scroll true 屏幕自动滚动到第一个验证不通过的位置。
focusFirstField true 验证未通过时，是否给第一个不通过的控件获取焦点。
validateNonVisibleFields false 是否验证不可见的元素（如 type="hidden" 的输入框，或多个输入控件在选项卡切换中）
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：提示信息
相关信息
作者网站：http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
相关文档：Github 中文文档
授权协议：MIT
---------------------
作者：月亮树上的春哥
来源：CSDN
原文：https://blog.csdn.net/yanghai0000/article/details/46517847
版权声明：本文为博主原创文章，转载请附上博文链接！
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
