表单验证插件:jQuery Validation Engine

maxErrorsPerField
在老版本中，如果我们设置验证规则为：validate[required,minSize[6],maxSize[20］，如果什么都没有填，就会出现 3 个提示有木有！如果多个输入框之间的间隔不是很多，会遮住下面的输入框或者提示信息有木有！
这个参数是我觉得这次更新最有用的参数，设置为 1 时，就不会出现 3 个提示，而只会出现 1 个提示。

$("#formId")..validationEngine({
maxErrorsPerField: 1 // 参数值为数值
});

showOneMessage
该参数的功能是，在提交验证时，只会显示第一个输入框的错误，后面的都不会显示，和 maxErrorsPerField 结合使用，超级赞

$("#formId").validationEngine({
showOneMessage: true
});

focusFirstField
使用该参数，在提交验证时，如果没有通过验证规则，那么会让第一个输入框自动获取焦点，用户体验很好，这个参数默认是开启的，所以不需要再次设置。

$("#formId").validationEngine({
focusFirstField: true
});

autoHidePrompt
autoHideDelay
自动隐藏提示信息，以及设置延时多久自动隐藏。

$("#formId").validationEngine({
autoHidePrompt: true
autoHideDelay: 5000 // 单位毫秒（ms）
});

autoPositionUpdate
自动调整提示信息。使用后，当窗口大小变化时，会自动调整提示信息的位置，对于不是固定布局的页面很有用。
$("#formId").validationEngine({
autoPositionUpdate: true
});
addPromptClass
给提示信息的元素增加样式。在没有这个参数之前，都是直接修改 Validation Engine 自身的样式，或者在表单上手动增加一个样式，再通过后辈选择器来覆盖，有了这个参数，将能更灵活的控制样式。
$("#formId").validationEngine({
addPromptClass: ""
});
custom_error_messages
自定义错误信息的内容。当同一个验证方式，在不同的页面要求显示不同的提示信息时，这个参数就能大显身手，例如：注册的同意协议勾选框，要求必选，默认只会提示为必填，而我们需要更准确的提示“请先阅读并同意服务协议”。具体可以参考这个例子。

$("#formId").validationEngine({
custom_error_messages: {
"#id":{ // 元素的选择器
"ruleName":{ // 该元素的验证规则名称，如：required、minSize、custom[url]
"message":"" // 自定义提示的内容
}
}
}
});
addSuccessCssClassToField
addFailureCssClassToField
当验证通过或不通过时，给元素增加的样式。通过增加样式来让元素更醒目的提示，也是不错的体验。

$("#formId").validationEngine({
addSuccessCssClassToField: "success"
addFailureCssClassToField: "failure"
});
data-prompt-positio
这个参数，可以给提示信息的位置进行细调，当元素周围有内容，不希望被提示信息遮挡时，可以通过该参数来调整，例如：验证码的图片通常都是在输入框的右边，那么可以将提示信息调到验证码图片的右边。
这个参数不是调用时使用的，是直接写在元素上，

<input class="validate[required]" type="text" data-prompt-position="centerRight:100,0">

【options 参数说明】（可选）

名称	默认值	说明
validationEventTrigger	"blur"	触发验证的事件，支持事件可参考 jQuery 的事件说明。 PS：如果希望只在表单提交时验证，可以设置为空。
scroll	true	屏幕自动滚动到第一个验证不通过的位置
focusFirstField	true	验证未通过时，是否给第一个不通过的控件获取焦点
promptPosition	"topRight"	验证提示信息的位置，可设置为："topRight", "bottomLeft", "centerRight", "bottomRight"
autoPositionUpdate	false	是否自动调整提示层的位置
bindMethod	"bind"	验证事件的绑定方式，可设置为：bind, live PS：设置 live 似乎绑定事件无效，但是表单提交时能验证，建议不修改。[Demo]
binded	false	是否已经绑定其他事件，设为 true 将不进行验证。
inlineAjax	false
ajaxFormValidation	false	使用 Ajax 验证表单
ajaxFormValidationURL	false	设置 Ajax 验证的 URL，默认使用 form 的 action 属性
ajaxValidCache	{}
onAjaxFormComplete	$.noop	表单提交，Ajax 验证完成后的行为（Function）[Demo]
onBeforeAjaxFormValidation	$.noop	表单提交验证规则通过后，Ajax 验证之前的行为（Function）[Demo]
onValidationComplete	false	表单提交验证完成时的行为（Function） 可以得到两个参数：表单元素 和 验证结果（ture or false）[Demo]
onSuccess	false	实时验证所有项目都通过时，发生的行为（Function）[Demo]
onFailure	false	实时验证有未通过项目时，发生的行为（Function）[Demo] PS：onSuccess 和 onFailure 在禁用实时验证时无效。例如 validationEventTrigger 设为空，或 bindMethod 设为 live
isOverflown	false	表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll） PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入； 　　此时需要在控件外层再套一个元素，并设置 class="inputContainer"
overflownDIV	""	设置了溢出滚动的元素，格式为 jQuery 的选择器。
showArrow	true
isError	false
InvalidFields	[]

【使用方法】

载入 CSS 文件

<link rel="stylesheet" href="css/validationEngine.jquery.css">

载入 JavaScript 文件

<script src="js/jquery.validationEngine.js"></script> 
<script src="js/jquery.validationEngine-zh_CN.js"></script> 
<!-- 
jquery.validationEngine-zh_CN.js 该文件为提示文字和自定义验证规则； 
修改版已经将这两个文件合并，只需要载入 jquery.validationEngine.js； 
另外，jQuery 插件当然还需要载入 jQuery 库，版本需在 jQuery 1.4.4 以上。 
-->

给表单加上 ID

<form id="form_id" ...> 
... 
</form> 
<!-- ID 必须设置在 Form 标签中，否则无效 -->

给控件加上 ID 及 设置验证类型

<input id="test_1" name="test_1" type="text" class="validate[required]"> 
<input id="test_2" name="test_2" type="checkbox" class="validate[required]"> 
<textarea id="test_3" name="test_3" class="validate[required]"><textarea> 
<!-- 
validate[required] 表示必须填写 
控件必须要设置 ID，但并不要求与 Name 相同 
--> 

设置验证

// 直接调用 
$("#form_id").validationEngine(); 
 
// 自定义参数调用 
$("#form_id").validationEngine("attach",{ 
    promptPosition:"centerRight", 
    scroll:false 
}); 

【验证类型】

<!-- 
注：验证规则均写在 validate[] 中，如有多条规则，用英文逗号(,) 分割。 
例：validate[required,minSize[6],custom[onlyLetterNumber]] 
--> 

名称	示例	说明
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]]	最小值（该项为数字的最小值，注意与 minSize 的区分）
max[int]	validate[max[9999]]	最大值（该项为数字的最大值，注意与 maxSize 的区分）
past[date]	validate[past[2012/12/20]]	日期必需在 date 或 date 的未来。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[date]	validate[future[now]]	日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
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]]	验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat	validate[custom[dateFormat]]	验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
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]]	调用外部函数

【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")	更新提示层的位置