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

最新推荐文章于 2024-03-23 09:36:04 发布

转载最新推荐文章于 2024-03-23 09:36:04 发布 · 4.3k 阅读

文章标签：

#javascript #jquery

js jquery 专栏收录该内容

65 篇文章

订阅专栏

本文介绍了一款基于Jquery的表单验证插件ValidationEngine，它支持广泛的自定义验证，并能方便地与AJAX整合。文章详细阐述了插件的安装、配置步骤，并列举了多种验证类型的设置。

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<!--

3jQuery(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]]	验证电话号码
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/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验证的情况下，要么不能验证要么验证了通不过要么通过了提交不了。