1. 云栖社区>
  2. PHP教程>
  3. 正文

jQuery Validation Engine 表单验证

作者:用户 来源:互联网 时间:2017-12-01 09:28:50

jquery表单验证validationengine

jQuery Validation Engine 表单验证 - 摘要: 本文讲的是jQuery Validation Engine 表单验证, 转载至:http://code.ciaoca.com/jquery/validation_engine/ 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则

转载至: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 文件

载入 JavaScript 文件




给表单加上 ID


...

给控件添加验证类型



;

设置验证
//直接调用
$("#form_id").validationEngine();
//自定义参数调用
$("#form_id").validationEngine("attach",{
promptPosition:"centerRight",
scroll:false
});
支持链式操作
$("#form_id").validationEngine().css({border:"2pxsolid#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 后,提示内容的插入位置将更改为在验证的控件之前插入;

  此时需要在控件外层再套一个元素,并设置

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" 是有效。



错误信息属性(实验的)

属性值与验证规则相对应



data-errormessage-value-missing="E-mail不能为空"
data-errormessage-custom-error="E-mail格式应为:[email protected]"
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

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery , 表单 , 验证 , validation engine ,以便于您获取更多的相关知识。