功能强大的 jQuery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。
jQuery Validation Engine v2.6.2：兼容 IE 6 , Chrome, Firefox, Safari, Opera 10 ，要求jQuery版本1.7以上。下载地址：http://code.ciaoca.com/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2.zip。另有Ciaoca 中文增强版：下载地址，http://code.ciaoca.com/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2-ciaoca.zip。
一、使用方法
载入 CSS 文件
代码语言：javascript复制<link rel="stylesheet" href="css/validationEngine.jquery.css">载入 JavaScript 文件
代码语言：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
代码语言：javascript复制<!-- ID 须设置在 form 标签中 -->
<form id="form_id" ...>
...
</form> 给控件添加验证类型
代码语言：javascript复制<!-- 验证规则默认使用 class 属性 validate[required] 表示该项必须填写 -->
<input type="text" class="validate[required]">
<input type="checkbox" class="validate[required]">
<select class="validate[required]"></select> <!--默认的选项的value须为空--如下--><select class="validate[required]"><option value="">请选择</option></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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/186310.html原文链接：https://javaforall.cn 【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛 【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号... 
