`

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”属性或方法)

使用方法

 

载入 CSS 文件

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

载入 JavaScript 文件

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

给表单加上 ID

  1. <!-- ID 须设置在 form 标签中 --> 
  2. <form id="form_id" ...> 
  3. ... 
  4. </form> 
复制

给控件添加验证类型

  1. <!-- 
  2. 验证规则默认使用 class 属性 
  3. validate[required] 表示该项必须填写 
  4. --> 
  5. <input type="text" class="validate[required]"> 
  6. <input type="checkbox" class="validate[required]"> 
  7. <select class="validate[required]"></select>
  8. <textarea class="validate[required]"></textarea> 
复制

设置验证

  1. // 直接调用 
  2. $('#form_id').validationEngine(); 
  3.  
  4. // 自定义参数调用 
  5. $('#form_id').validationEngine('attach', { 
  6.   promptPosition: 'centerRight', 
  7.   scroll: false 
  8. });
复制

支持链式操作

  1. $('#form_id').validationEngine().css({border:'2px solid #000'});
复制

在线实例

基础示例
综合示例 实例预览
扩展必填验证 实例预览
日期类型验证 实例预览
正则验证 实例预览
多种输入控件的验证 实例预览
单选框、复选框的验证 实例预览
多表单验证 实例预览
DIV 容器 实例预览
不再需要 ID 属性 实例预览
较好体验的中文表单 实例预览
参数配置
全局设置 实例预览
自动隐藏提示信息 实例预览
自定义提示信息内容 实例预览
提示信息的数量 实例预览
只显示一个提示信息 实例预览
静默处理 实例预览
显示溢出限制 实例预览
验证回调函数(阻断提交) 实例预览
验证回调函数(不阻断提交) 实例预览
data 属性
自定义提示信息内容 实例预览
提示层的位置 实例预览
调整提示层的位置 实例预览
API 接口
显示提示信息 实例预览
改变提示层位置 实例预览
动态绑定 实例预览
自定义事件 实例预览
Ajax 验证
AJAX PHP 验证 实例预览
AJAX PHP 验证及提交 实例预览
附录
 [插件支持] selectbox 实例预览
[插件支持] datepicker 实例预览
[多语言] 日文 实例预览

验证类型

注:验证规则均写在 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]

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 日期的未来。

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]]

自定义规则验证  

  1. 'ruleName': { 
  2.   'regex': RegExp, 
  3.   /* 正则表达式,
  4.   如果正则能匹配内容表示通过 */ 
  5.   'alertText': '验证不通过时的提示信息' 
  6. }
复制

 

ajax validate[ajax[ajaxName]]

自定义 ajax 验证 

  1. 'ajaxName': { 
  2.   'url': 'phpajax/ajaxValidateFieldUser.php', 
  3.   /* 验证程序地址 */ 
  4.   'extraData': 'name=eric', /* 额外参数 */ 
  5.   'alertTextOk': '验证通过时的提示信息', 
  6.   'alertText': '验证不通过时的提示信息', 
  7.   'alertTextLoad': '正在验证时的提示信息' 
  8. } 
  9. /* 
  10.  * 例: 
  11.  * <input type="text" id="email" 
  12.  class="validate[ajax[ajaxName]]"> 
  13.  * 假设填写的值为:ciaoca@gmail.com 
  14.  * extraData 设置为:'type=register&verify=abcd' 
  15.  * 提交到后端的 url 为:phpajax/ajaxValidateFieldUser
  16.  .php?email=ciaoca@gmail.com&type=register
  17.  &verify=abcd 
  18.  */
复制

 

传输方式:get

传递参数:"fieldId=" + field.attr("id") + "&fieldValue=" + field.val()

额外参数:extraData 可以设置为字符串或对象,会在参数结尾追加 "&extraData"

返回数据格式:json

返回数据内容:[String,Boolean]

第一个值类型为 String,是接收到 fieldId 的值;

第二个值类型为 Boolean,验证通过返回 true,不通过返回 false

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 {} 自定义错误信息
maxErrorsPerField false 单个元素显示错误提示的最大数量,值设为数值。默认 false 表示不限制。
showOneMessage false 是否只显示一个提示信息
doNotShowAllErrosOnSubmit false 在提交表单时不显示所有的错误信息(建议使用参数 showOneMessage 替代)
addSuccessCssClassToField '' 验证通过时,给控件增加 class,当再次验证失败时,会去除。
addFailureCssClassToField '' 验证失败时,给控件增加 class,当再次验证通过时,会去除。
prettySelect false 是否使用了美化过的 select 选择控件
onFieldSuccess false 控件验证通过时的回调函数

function(field){}

onFieldFailure false 控件验证失败时的回调函数

function(field){}

onSuccess false 在表单验证结果为通过时的回调函数
onFailure false 在表单验证结果为失败时的回调函数

PS:onSuccess 和 onFailure

onValidationComplete false 表单提交验证完成时的回调函数

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       

function(status, form, json, options){}

onBeforeAjaxFormValidation $.noop 表单提交验证通过后,Ajax 提交之前的回调函数

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

错误信息属性(实验的)

属性值与验证规则相对应

  1. <!-- 自定义错误信息属性(实验支持) --> 
  2. <input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" 
  3.   data-errormessage-value-missing="E-mail 不能为空"  
  4.   data-errormessage-custom-error="E-mail 格式应为:someone@nowhere.com"  
  5.   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') 更新提示层的位置

自定义事件

插件增加的自定义事件

名称 示例 说明
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:提示信息

 

 

2
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery Validation Engine ( jQuery 表单验证插件)

    - `js` 文件夹:主要的JavaScript文件,如`validationEngine.jquery.js`是核心库,`validationEngine.jquery.min.js`是压缩版本。 - `demo` 文件夹:包含示例代码和演示,可以帮助你快速理解和使用Validation Engine...

    jQuery.validationEngine表单验证中文版

    **jQuery.validationEngine表单验证中文版** jQuery.validationEngine是一款强大的前端表单验证插件,它为开发者提供了便捷的方式来实现表单数据的验证。这个插件以其丰富的功能、友好的用户界面和灵活的自定义能力...

    jQuery.validationEngine 表单验证中文版

    jQuery.validationEngine是一款强大的JavaScript插件,专用于前端表单验证。这款插件以其简洁的API、丰富的验证规则和良好的国际化支持而备受青睐。在中文环境中,它可以为用户提供友好的中文提示,确保用户输入的...

    jquery.validationEngine 控件验证表单跟检测数据库是否有重名

    《jQuery.validationEngine控件在表单验证与数据库重名检测中的应用详解》 在Web开发中,表单验证是不可或缺的一环,它确保了用户输入数据的准确性和完整性。jQuery.validationEngine是一款强大的JavaScript验证...

    jquery表单验证插件validationEngine---个人修改

    **jQuery表单验证插件ValidationEngine详解** 在Web开发中,表单验证是必不可少的一环,它能够确保用户输入的数据符合预设的规则,从而提高数据的准确性和系统的稳定性。ValidationEngine是一款基于jQuery的强大的...

    表单验证jquery插件

    在页面加载完成后,使用 `$.validationEngine('attach')` 方法来初始化表单验证: ```javascript $(document).ready(function() { $("#yourFormId").validationEngine(); }); ``` ### 3.2 配置验证规则 在HTML...

    jquery.validationEngine校验插件

    jQuery ValidationEngine 是一款强大的前端表单验证插件,它极大地简化了网页表单的验证过程,使开发者无需编写复杂的取值和正则表达式比较,即可实现丰富的验证功能。该插件以其直观、易用和高度可定制性而受到广大...

    jQuery-Validation-Engine-master

    jQuery Validation Engine是一款强大的jQuery插件,专用于表单验证。这款控件以其丰富的功能、高度的自定义性和优雅的用户界面而备受推崇。在本文中,我们将深入探讨jQuery Validation Engine的核心概念、安装步骤、...

    (五)struts2- 2.3.15.3 spring3.2.4 mybatis-3.2.3 jquery.validationEngine表单验证

    jQuery.validationEngine则是一个强大的JavaScript库,用于前端表单验证,提供丰富的验证规则和友好的提示效果。 Struts2作为MVC(模型-视图-控制器)架构的一部分,主要用于处理用户的请求并控制应用流程。版本2.3...

    validationEngine验证组件改样式

    validationEngine是一款基于jQuery的表单验证插件,它提供了丰富的验证规则和自定义错误消息功能,使得在网页中实现复杂的用户输入验证变得简单易行。这个压缩包文件可能包含了经过修改后的validationEngine验证组件...

    JQuery.validationEngine表单验证插件(推荐)

    虽然在提供的内容中有些地方由于OCR识别技术的原因,存在个别字识别错误或者漏识别的情况,但整体而言,文档提供的信息足够详细,可以帮助开发者快速掌握JQuery.validationEngine表单验证插件的使用方法,并将其应用...

    表单验证jQuery-Validation-Engine-master

    **jQuery Validation Engine** 是一个强大的JavaScript插件,主要用于前端网页上的表单验证。它通过提供丰富的自定义样式和多种验证规则,帮助开发者实现用户输入数据的有效性和格式验证,确保用户在提交表单前输入...

    jquery.validationEngine.js

    强大的表单验证控件,验证表单的正确性。

    jQuery-Validation-Engine-2.6.2-ciaoca.zip

    jQuery Validation Engine 2.6.2 是一个强大的表单验证插件,由 Ciaoca 进行了中文增强,使得该工具更适合中国用户使用。这个插件基于流行的 JavaScript 库 jQuery,旨在提供一种简单而优雅的方式来验证用户在网页...

    jquery validation 支持zepto第二版

    在IT行业中,前端开发是至关重要的一个领域,而jQuery Validation插件则是JavaScript中用于表单验证的常用工具,它提供了一套完整的解决方案来确保用户输入的数据满足预设的规则。Zepto.js则是一个轻量级的...

    jquery-ui-validation-Engine

    **jQuery UI Validation Engine 插件...它是一个强大的前端验证工具,可以帮助开发者创建高效、易用的表单验证系统,提升网站的用户体验。在实际应用中,可以根据具体需求进行细致的配置和扩展,以满足各种复杂场景。

    jQuery Validation Engine验证控件调用外部函数验证的方法

    jQuery Validation Engine是一款强大的表单验证插件,它允许开发者对用户输入的数据进行各种复杂的验证。在某些情况下,可能需要自定义验证规则,这就涉及到调用外部函数进行验证。本篇文章将详细讲解如何在jQuery ...

    validationEngine 表单验证插件使用实例代码

    `validationEngine`是一款基于jQuery的表单验证插件,它能帮助开发者轻松地实现对用户输入数据的实时验证,提供了一种美观且直观的方式来确保表单数据的有效性。本实例将详细讲解如何使用`validationEngine`插件进行...

    jQuery.Validation.Engine

    **jQuery.Validation.Engine** 是一个基于JavaScript库jQuery的插件,专为网页表单验证提供强大支持。这个插件设计精美,功能丰富,可以帮助开发者轻松创建符合业务规则的表单验证,提升用户体验,确保用户输入的...

    动态表单验证 jquery

    在本文中,我们将深入探讨如何使用jQuery库实现动态表单验证,特别是基于`jquery.validationEngine.js`插件的用法。 jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。在动态表单验证...

Global site tag (gtag.js) - Google Analytics