<!-- saved from url=(0048)http://code.ciaoca.com/jquery/validation_engine/ -->


 

jQuery Validation Engine 表单验证 - 前端开发仓库

<script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/jquery-1.9.1.min.js"></script><script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/plugins.js"></script>


前端开发仓库 » jQuery » jQuery Validation Engine 表单验证



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"。 根据中文字体优化样式 增加多款验证样式 增加针对中文的验证规则 移除无用的验证规则示例 完善对 IE8 以下浏览器的支持（错误：对象不支持“indexOf”属性或方法）

 



 



使用方法



载入 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@
 * extraData 设置为：'type=register&verify=abcd'
 * 提交到后端的 url 为：phpajax/ajaxValidateFieldUser.php?email=ciaoca@&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@" 
  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：提示信息



相关信息

<script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/jquery.chili-2.2.min.js"></script><script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/recipes.js"></script><script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/code.js"></script><script type="text/javascript" src="/admin/blogs/jQuery%20Validation%20Engine%20%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81%20-%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E4%BB%93%E5%BA%93_files/donate.js"></script>


<script type="text/javascript">// <![CDATA[ var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cdiv id='cnzz_stat_icon_5076009' style='display:none;'%3E%3C/div%3E%3Cscript src='" + cnzz_protocol + "s25.cnzz.com/stat.php%3Fid%3D5076009' type='text/javascript'%3E%3C/script%3E")); // ]]></script>