1.基本用法
1 |
<link rel="stylesheet" href="/css/validationEngine.jquery.css"> |
2 |
<script src="/js/jquery.validationEngine.js"></script> |
1 |
<input id="my1" name="my1" type="text" class="validate[required]"> |
1 |
<script language="Javascript"> |
3 |
jQuery(document).ready(function(){
|
4 |
jQuery("#my_form").validationEngine('attach'); |
2:options 参数
| 名称 |
默认值 |
说明 |
| validationEventTrigger |
“blur” |
触发验证的事件,支持事件可参考 jQuery 的事件说明。 |
| scroll |
true |
屏幕自动滚动到第一个未通过验证的位置 |
| focusFirstField |
true |
验证未通过时,第一个未通过的控件是否设置为焦点 |
| promptPosition |
“topRight” |
验证提示信息的位置,可设置为:”topRight”, “bottomLeft”, “centerRight”, “bottomRight” |
| autoPositionUpdate |
false |
是否自动调整提示层的位置 |
| bindMethod |
“bind” |
验证事件的绑定方式,可设置为:bind, live |
| binded |
false |
是否已经绑定其他事件,设为 true 将不进行验证。 |
| inlineAjax |
false |
|
| ajaxFormValidation |
false |
使用 Ajax 验证表单 |
| ajaxFormValidationURL |
false |
设置 Ajax 验证的 URL,默认使用 form 的 action 属性 |
| ajaxValidCache |
{} |
|
| onAjaxFormComplete |
$.noop |
表单提交,Ajax 验证完成后的行为(Function) |
| onBeforeAjaxFormValidation |
$.noop |
表单提交验证规则通过后,Ajax 验证之前的行为(Function) |
| onValidationComplete |
false |
表单提交验证完成时的行为(Function)可以得到两个参数:表 单元素 和 验证结果(ture or false) |
| onSuccess |
false |
实时验证所有项目都通过时,发生的行为(Function) |
| onFailure |
false |
实时验证有未通过项目时,发生的行为(Function)PS: onSuccess 和 onFailure 在禁用实时验证时无效。 |
| isOverflown |
false |
表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll) |
| overflownDIV |
“” |
设置了溢出滚动的元素,格式为 jQuery 的选择器。 |
| showArrow |
true |
|
| isError |
false |
|
| InvalidFields |
[] |
|
(1)参数如何配置
1 |
<script language="Javascript"> |
3 |
$("#my_form").validationEngine("attach",{
|
4 |
promptPosition:"centerRight", |
3.写在class中的验证类型及方法设置参数
| 名称 |
示例 |
说明 |
| required |
validate[required] |
必填项 |
| optional |
validate[optional] |
可选项。若不输入,不要求必填,若有输入,则验证 其是否符合要求。 |
| dateRange[name] |
validate[dateRange[grp1]] |
验证日期范围 |
| dateTimeRange[name] |
validate[dateTimeRange[grp1]] |
验证日期及时间范围 |
| minSize[int] |
validate[minSize[6]] |
最少输入字符数 |
| maxSize[int] |
validate[maxSize[20]] |
最多输入字符数 |
| groupRequired[name] |
validate[groupRequired[grp2]] |
群组中至少输入一项 |
| min[int] |
validate[min[1]] |
最小值(数值的最小值) |
| max[int] |
validate[max[9999]] |
最大值(数值的最大值) |
| past[date] |
validate[past[2012/12/20]] |
日期必需在 date 或 date 的将来。格式为 YYYY/ MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now。 |
| future[date] |
validate[future[now]] |
日期必须在 data 或 date 的过去。 |
| maxCheckbox[int] |
validate[maxCheckbox[2]] |
最多选取的项目数(用于Checkbox) |
| minCheckbox |
validate[minCheckbox[2]] |
最少选取的项目数(用于Checkbox) |
| equals |
validate[equals[id]] |
当前控件值需与 id 这个控件的值相同 |
| phone |
validate[custom[phone]] |
验证电话号码 |
| email |
validate[custom[email]] |
验证 Email 地址 |
| integer |
validate[custom[integer]] |
验证整数 |
| number |
validate[custom[number]] |
验证数字 |
| date |
validate[custom[date]] |
验证日期 |
| dateFormat |
validate[custom[dateFormat]] |
验证日期格式 |
| dateTimeFormat |
validate[custom[dateTimeFormat]] |
验证日期及时间格式,格式为:YYYY/ MM/DD hh:mm:ss AM|PM |
| ipv4 |
validate[custom[ipv4]] |
验证 ipv4 地址 |
| url |
validate[custom[url]] |
验证 url 地址,需以 http://、https:// 或 ftp:// 开头 |
| onlyNumberSp |
validate[custom[onlyNumberSp]] |
只接受填数字和空格 |
| onlyLetterSp |
validate[custom[onlyLetterSp]] |
只接受填英文字母(大小写)和单引号(‘) |
| onlyLetterNumber |
validate[custom[onlyLetterNumber]] |
只接受数字和英文字母 |
| ajax |
validate[ajax[ajaxUserCallPhp]] |
在验证规则中自定义
“ajaxUserCallPhp”:{
“url”:”phpajax/ajaxValidateField
User.php”,
“extraData”:”name=eric”,
“alertTextOk”:”* 此帐号名称可以使用”,
“alertText”:”* 此名称已被其他人使用”,
“alertTextLoad”:”* 正在确认帐号
名称是否有其他人使用,请稍等。”
}
|
| funcCall |
validate[funcCall[functionName]] |
调用外部函数 |
(1)完整的例子是:
<input id=”my1″ name=”my1″ type=”text” class=”validate[required,minSize[6],
custom[onlyLetterNumber]]”>,多个规则用英文的逗号分隔。
4.Validation Engine的API 方法参数
名称
默认值
说明
validationEventTrigger
“blur”
触发验证的事件,支持事件可参考 jQuery 的事件说明。
scroll
true
屏幕自动滚动到第一个未通过验证的位置
focusFirstField
true
验证未通过时,第一个未通过的控件是否设置为焦点
promptPosition
“topRight”
验证提示信息的位置,可设置为:”topRight”, “bottomLeft”,
“centerRight”, “bottomRight”
autoPositionUpdate
false
是否自动调整提示层的位置
bindMethod
“bind”
验证事件的绑定方式,可设置为:bind, live
binded
false
是否已经绑定其他事件,设为 true 将不进行验证。
inlineAjax
false
ajaxFormValidation
false
使用 Ajax 验证表单
ajaxFormValidationURL
false
设置 Ajax 验证的 URL,默认使用 form 的 action 属性
ajaxValidCache
{}
onAjaxFormComplete
$.noop
表单提交,Ajax 验证完成后的行为(Function)
onBeforeAjaxFormValidation
$.noop
表单提交验证规则通过后,Ajax 验证之前的行为(Function)
onValidationComplete
false
表单提交验证完成时的行为(Function)可以得到两个参数:表
单元素 和 验证结果(ture or false)
onSuccess
false
实时验证所有项目都通过时,发生的行为(Function)
onFailure
false
实时验证有未通过项目时,发生的行为(Function)PS:
onSuccess 和 onFailure 在禁用实时验证时无效。
isOverflown
false
表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)
overflownDIV
“”
设置了溢出滚动的元素,格式为 jQuery 的选择器。
showArrow
true
isError
false
InvalidFields
[]
(1).ajax验证表单
如果要实现ajax验证的话,需要添加一条规则:ajax[ajaxUserCallPhp]],例如<input id=”my1″
name=”my1″ type=”text” class=”validate[required,minSize[6],custom[onlyLetterNumber]],ajax[ajaxUserCallPhp]]”>
注意这个ajaxUserCallPhp是在jquery.validationEngine-zh_CN.js中有个属性ajaxUserCallPhp
里面有详细的设定
(2).如何判断该表单是否已经通过所有的验证
if($("#hyForm").validationEngine('validate')){ ... }