表单验证插件: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：如果希望只在表单提交时验证，可以设置为空。

scrolltrue屏幕自动滚动到第一个验证不通过的位置focusFirstFieldtrue验证未通过时，是否给第一个不通过的控件获取焦点promptPosition"topRight"验证提示信息的位置，可设置为："topRight", "bottomLeft", "centerRight", "bottomRight"autoPositionUpdatefalse是否自动调整提示层的位置bindMethod"bind"验证事件的绑定方式，可设置为：bind, live

PS：设置 live 似乎绑定事件无效，但是表单提交时能验证，建议不修改。[Demo]

bindedfalse是否已经绑定其他事件，设为 true 将不进行验证。inlineAjaxfalse ajaxFormValidationfalse使用 Ajax 验证表单ajaxFormValidationURLfalse设置 Ajax 验证的 URL，默认使用 form 的 action 属性ajaxValidCache{} onAjaxFormComplete$.noop表单提交，Ajax 验证完成后的行为（Function）[Demo]onBeforeAjaxFormValidation$.noop表单提交验证规则通过后，Ajax 验证之前的行为（Function）[Demo]onValidationCompletefalse表单提交验证完成时的行为（Function）

可以得到两个参数：表单元素 和 验证结果（ture or false）[Demo]

onSuccessfalse实时验证所有项目都通过时，发生的行为（Function）[Demo]onFailurefalse实时验证有未通过项目时，发生的行为（Function）[Demo]

PS：onSuccess 和 onFailure 在禁用实时验证时无效。例如 validationEventTrigger 设为空，或 bindMethod 设为 live

isOverflownfalse表单是否在溢出滚动的元素内（即外部元素设置了 overflow:scroll）

PS：设置为 ture 后，提示内容的插入位置将更改为在验证的控件之前插入；

　　此时需要在控件外层再套一个元素，并设置 class="inputContainer"

overflownDIV""设置了溢出滚动的元素，格式为 jQuery 的选择器。showArrowtrue isErrorfalse 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]] --> 

名称示例说明requiredvalidate[required]表示必填项optionalvalidate[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 或 nowfuture[date]validate[future[now]]日期必须在 data 或 date 的过去。date 格式可写作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 nowmaxCheckbox[int]validate[maxCheckbox[2]]最多选取的项目数（用于Checkbox）minCheckboxvalidate[minCheckbox[2]]最少选取的项目数（用于Checkbox）equalsvalidate[equals[id]]当前控件值需与 id 这个控件的值相同phonevalidate[custom[phone]]验证电话号码emailvalidate[custom[email]]验证 Email 地址integervalidate[custom[integer]]验证整数numbervalidate[custom[number]]验证数字datevalidate[custom[date]]验证日期，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-DdateFormatvalidate[custom[dateFormat]]验证日期格式，格式为 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-DdateTimeFormatvalidate[custom[dateTimeFormat]]验证日期及时间格式，格式为：YYYY/MM/DD hh:mm:ss AM|PMipv4validate[custom[ipv4]]验证 ipv4 地址urlvalidate[custom[url]]验证 url 地址，需以 http://、https:// 或 ftp:// 开头onlyNumberSpvalidate[custom[onlyNumberSp]]只接受填数字和空格onlyLetterSpvalidate[custom[onlyLetterSp]]只接受填英文字母（大小写）和单引号(')onlyLetterNumbervalidate[custom[onlyLetterNumber]]只接受数字和英文字母ajaxvalidate[ajax[ajaxUserCallPhp]]在验证规则中自定义

"ajaxUserCallPhp":{

"url":"phpajax/ajaxValidateFieldUser.PHP",

"extraData":"name=eric",

"alertTextOk":"* 此帐号名称可以使用",

"alertText":"* 此名称已被其他人使用",

"alertTextLoad":"* 正在确认帐号名称是否有其他人使用，请稍等。"

}

funcCallvalidate[funcCall[functionName]]调用外部函数

【API 方法】

名称示例说明attach$("#form_id").validationEngine("attach");注册表单验证事件detach$("#form_id").validationEngine("detach");取消注册表单验证事件validatealert($("#form_id").validationEngine("validate"));验证表单，返回结果 true 或 falsevalidateFieldalert($("#form_id").validationEngine
("validateField","#element_id"));验证单个控件，返回结果 true 或 falseshowPrompt$("#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")更新提示层的位置