Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
附件提供了该插件,解压密码为:im486,Js目录下为Validation Engine所需js文件(不包括jquery),css目录下的validationEngine.jquery.css为本插件样式文件,demo为示例文件(其下的demos目录为包括ajax验证等的各种示例)。
一般的使用方法如下:
第一步,在head中插入如下代码,具体路径取决于你放置文件的地方:
1 | < link rel = "stylesheet" href = "/css/validationEngine.jquery.css" > |
2 | < script src = "/js/jquery.validationEngine.js" ></ script > |
如果没有Jquery文件还需要添加一行<script src="/js/jquery.js"></script>。
当然,2个(或者3个)必须的文件必须要实际存在路径正确。
第二步,给需要使用表单验证的FORM增加ID。例如<form id="my_form">...</form>。(我们知道,很多时候对象的确定是通过ID来实现,没有ID,就会出现对象为空的情况,这个很好理解。)
第三步,给需要验证的表单元素(一般是INPUT)增加ID和验证类型。
1 | < input id = "my1" name = "my1" type = "text" class = "validate[required]" > |
其中ID和CLASS是必须设置的(至于ID的唯一性依旧是必须的),忘记设置input表单元素的ID而导致插件无法正常运行的情况是最常见的错误。设置ID的目的依旧是确定对象,而class中则指定验证类型与方法(可以以空格方式单独设置样式,例如class="validate[required] my1"。)
第四步,在<head></head>中增加调用验证代码,一个比较标准的例子如下:
1 | <script language= "Javascript" > |
2 | <!-- |
3 | jQuery(document).ready( function (){ |
4 | jQuery( "#my_form" ).validationEngine( 'attach' ); |
5 | }); |
6 | --> |
7 | </script> |
jQuery("#my_form")中的my_form即是第二步中设置的表单ID。
表一: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 | <script language= "Javascript" > |
2 | <!-- |
3 | $( "#my_form" ).validationEngine( "attach" ,{ |
4 | promptPosition: "centerRight" , |
5 | scroll: false |
6 | }); |
7 | --> |
8 | </script> |
表2,验证类型及方法设置参数
名称 | 示例 | 说明 |
---|---|---|
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]] | 验证电话号码 |
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/ajaxValidateFieldUser.php", "extraData":"name=eric", "alertTextOk":"* 此帐号名称可以使用", "alertText":"* 此名称已被其他人使用", "alertTextLoad":"* 正在确认帐号名称是否有其他人使用,请稍等。" } |
funcCall | validate[funcCall[functionName]] | 调用外部函数 |
表2给出的参数实际就是input元素验证规则的参数,一个完整的例子是:<input id="my1" name="my1" type="text" class="validate[required,minSize[6],custom[onlyLetterNumber]]">,多个规则用英文的逗号分隔。该规则的3个部分分别是"必填"、"最短6个字符"、"只能为数字型"的意思,在表2中可以查到。Validation Engine可以验证邮箱、日期等格式,还可以设定必填项,这个在旧式的JS验证中是比较难于实现的——当然,在最新的浏览器中也可以无须插件而实现相同的功能,不过Validation Engine的强大之处正是可以兼容古董级的IE6以及其他旧式浏览器,让其实现高级表单验证的功能。
表三,Validation Engine的API 方法参数
名称 | 示例 | 说明 |
---|---|---|
attach | $("#form_id").validationEngine("attach"); | 注册表单验证事件 |
detach | $("#form_id").validationEngine("detach"); | 取消注册表单验证事件 |
validate | alert($("#form_id").validationEngine("validate")); | 验证表单,返回结果 true 或 false |
validateField | alert($("#form_id").validationEngine("validateField","#element_id")); | 验证单个控件,返回结果 true 或 false |
showPrompt | $("#element_id").validationEngine("showPrompt","提示内容","load"); | 在该元素上创建一个提示内容,3 种状态:"pass", "error", "load" |
hidePrompt | $("#element_id").validationEngine("hidePrompt"); | 隐藏该元素的提示内容 |
hide | $("#form_id").validationEngine("hide"); | 关闭表单中的提示 |
hideAll | $("#form_id").validationEngine("hideAll"); | 关闭页面上的所有提示 |
updatePromptsPosition | $("#form_id").validationEngine("updatePromptsPosition") | 更新提示层的位置 |
如果要实现ajax验证的话,需要添加一条规则:ajax[ajaxUserCallPhp]],例如<input id="my1" name="my1" type="text" class="validate[required,minSize[6],custom[onlyLetterNumber]],ajax[ajaxUserCallPhp]]">,同时需要把phpajax目录放到合适的地方,如果phpajax目录放置在网站根目录下,而jquery.validationEngine.js放置在网站根目录下的js目录中的话,我们需要修改jquery.validationEngine.js中的"phpajax/"为"../phpajax/",否则会因为路径问题而无法调用ajax。
---------------------------------------------------------------------------------------------
2012年11月9日后记:本插件自带的ajax验证功能可能与其他ajax类页面刷新功能冲突,验证倒是可以,不过通不过也能提交。另外在Trident、Gecko、Presto等不同浏览器中——加入自带ajax验证的情况下,要么不能验证要么验证了通不过要么通过了提交不了。