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')){ ... }