validationEngine

• ·jQuery v1.4.4+

注意事項：

1.演示版本為 v2.2.4；

2.v2.0 以下的版本參數並不完全通用；

對 validationEngine.jquery.css 文件進行修改，修改如下：

1.提示內容字體改為宋體；

2.去除中各瀏覽器的私有屬性（各瀏覽器已經支持圓角和陰影，不再需要加私有屬性）。

對 jquery.validationEngine.js 文件進行修改，修改如下：

1.將 312 行的 field.focus(); 注釋掉，當有輸入控件在 Table 內部時，驗證會導致回到頂部的現象；

對 jquery.validationEngine-zh_CN.js 文件進行修改，修改如下：

1.修改部分提示文字；

2.增加兩個對中文字符的驗證規則：minSizeCN 和 maxSizeCN；

3.去除 "validate2fields": {"alertText":"* 請輸入 HELLO"},

將以上兩個JS文件進行合並

查看 Demo

修改版：jQuery Validation Engine v2.2.4 中文版

原　版：jQuery Validation Engine v2.2.4

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