1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 基于jQuery的表单验证插件Validation Engine

基于jQuery的表单验证插件Validation Engine

时间:2023-07-09 07:44:20

相关推荐

基于jQuery的表单验证插件Validation Engine

Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。

附件提供了该插件,解压密码为:im486,Js目录下为Validation Engine所需js文件(不包括jquery),css目录下的validationEngine.jquery.css为本插件样式文件,demo为示例文件(其下的demos目录为包括ajax验证等的各种示例)。

一般的使用方法如下:

第一步,在head中插入如下代码,具体路径取决于你放置文件的地方:

如果没有Jquery文件还需要添加一行<script src="/js/jquery.js"></script>。

当然,2个(或者3个)必须的文件必须要实际存在路径正确。

第二步,给需要使用表单验证的FORM增加ID。例如<form id="my_form">...</form>。(我们知道,很多时候对象的确定是通过ID来实现,没有ID,就会出现对象为空的情况,这个很好理解。)

第三步,给需要验证的表单元素(一般是INPUT)增加ID和验证类型。

其中ID和CLASS是必须设置的(至于ID的唯一性依旧是必须的),忘记设置input表单元素的ID而导致插件无法正常运行的情况是最常见的错误。设置ID的目的依旧是确定对象,而class中则指定验证类型与方法(可以以空格方式单独设置样式,例如class="validate[required] my1"。)

第四步,在<head></head>中增加调用验证代码,一个比较标准的例子如下:

jQuery("#my_form")中的my_form即是第二步中设置的表单ID。

表一:options 参数

表一所列举的内容即是第四步中的调用设置,一个更复杂的设置如下:

表2,验证类型及方法设置参数

表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 方法参数

如果要实现ajax验证的话,需要添加一条规则:ajax[ajaxUserCallPhp]],例如<input id="my1" name="my1" type="text" class="validate[required,minSize[6],custom[onlyLetterNumber]],ajax[ajaxUserCallPhp]]"&gt;,同时需要把phpajax目录放到合适的地方,如果phpajax目录放置在网站根目录下,而jquery.validationEngine.js放置在网站根目录下的js目录中的话,我们需要修改jquery.validationEngine.js中的"phpajax/"为"../phpajax/",否则会因为路径问题而无法调用ajax。

---------------------------------------------------------------------------------------------

11月9日后记:本插件自带的ajax验证功能可能与其他ajax类页面刷新功能冲突,验证倒是可以,不过通不过也能提交。另外在Trident、Gecko、Presto等不同浏览器中——加入自带ajax验证的情况下,要么不能验证要么验证了通不过要么通过了提交不了。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。