1.基本用法 1 | <linkrel="stylesheet"href="/css/validationEngine.jquery.css"> |
2 | <scriptsrc="/js/jquery.validationEngine.js"></script> |
1 | <inputid="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')){ ... }
|
微信便捷交流