基于jQuery的表单验证插件Validation Engine
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验证的情况下，要么不能验证要么验证了通不过要么通过了提交不了。
转载于:https://my.oschina.net/weiqinxue/blog/725235
基于jQuery的表单验证插件Validation Engine相关推荐
- 基于jQuery的表单验证插件：jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- jQuery Validate 表单验证插件
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑 ...
- JQuery.validationEngine表单验证插件
一.说明 JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式: 1.字符类型:非空验证.最大长度.最小长度.相等判断.数字和空格.数字和英文字母 2.数字类型:数字 ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- 一款优秀的表单验证插件——validation插件
特点: 内置验证规则:拥有必填.数字.email.url和信用卡号码等19类内置验证规则. 自定义验证规则:可以很方便的自定义验证规则. 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默 ...
最新文章
- java saf_Java 8 Lambda表达式探险
- python函数第二次运行报错_Python学习笔记2-函数、高级特性
- 怪异的StackOverflowException异常
- git remote添加其他SSH端口
- jupyter notebook 更改工作目录
- C++ Primer 第三章 字符串、向量和数组
- centOS安装python
- 1507四舍五入c语言,EXCEL中四舍五入该怎么办
- MongoDB索引实战技巧
- 如何使用分析模型 — 3. 排比图，分析问题的同时给出答案
- linux 进程wait,linux 进程等待 wait 、 waitpid(示例代码)
- linux的常用的软件,Linux常用的软件和命令
- MySql 中的 int(11) 到底代表什么意思？
- Class.forName()、Class.forName().newInstance() 、New 三者区别！
- 2017-05-24
- 适应网络伦理关系要求的新的伦理观
- 多渠道下门店如何进行会员管理和会员营销
- 腐蚀rust服务器系统,腐蚀rust有哪些服务器命令 腐蚀rust服务器命令一览
- Android 使用高德SDK编写周边搜索定位
- Fasm汇编程序1.73，中文文档，第一章