Validation Engine 表單驗證

前端開發倉庫 » jQuery » jQuery Validation Engine 表單驗證

jQuery Validation Engine 表單驗證來源

功能強大的 jQuery 表單驗證插件，適用於日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以添加自定義的驗證規則。

兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+

相對 2.2.4 版本的一些區別：

 

部分參數功能發生變化；

輸入控件可以不寫 id 屬性；

參數 onSuccess 和 onFailure 改為只在表單提交時觸發；

驗證規則 past[date]（過去） 與 future[date]（未來） 對調；

API 接口驗證控件均使用 "validate"，移除 "validateField"；

API 接口隱藏提示均使用 "hide" 移除 "hidePrompt"，保留 "hideAll"。

Ciaoca 中文優化版本：

根據中文字體優化樣式

增加多款驗證樣式

增加針對中文的驗證規則

移除無用的驗證規則示例

完善對 IE8 以下瀏覽器的支持（錯誤：對象不支持“indexOf”屬性或方法）

版本：jQuery v1.7+jQuery Validation Engine v2.6.2

• 查看 Demo
• 下載 jQuery Validation Engine v2.6.2
• 中文優化版本：jQuery Validation Engine v2.6.2 By Ciaoca
• 提交問題 / Bug / 建議

文檔目錄

1. 使用方法
2. 驗證類型
3. 參數說明
4. HTML5 屬性
5. API 接口
6. 自定義事件
7. 相關信息

使用方法

載入 CSS 文件

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

載入 JavaScript 文件

<script src="js/jquery.js"></script> <script src="js/jquery.validationEngine-zh_CN.js"></script> <script src="js/jquery.validationEngine.js"></script> <!-- jquery.validationEngine-zh_CN.js 為配置文件，可根據需求自行調整或增加，也可以更換為其他語言配置文件 --> 

給表單加上 ID

<!-- ID 須設置在 form 標簽中 --> <form id="form_id" ...> ... </form> 

給控件添加驗證類型

<!-- 驗證規則默認使用 class 屬性 validate[required] 表示該項必須填寫 --> <input type="text" class="validate[required]"> <input type="checkbox" class="validate[required]"> <select class="validate[required]"></select>; <textarea class="validate[required]"></textarea> 

設置驗證

// 直接調用 $('#form_id').validationEngine(); // 自定義參數調用 $('#form_id').validationEngine('attach', { promptPosition: 'centerRight', scroll: false }); 

支持鏈式操作

$('#form_id').validationEngine().css({border:'2px solid #000'});

驗證類型

注：驗證規則均寫在 validate[] 中，如有多條規則，用英文逗號(,)分割。

例：validate[required,minSize[6],custom[onlyLetterNumber]]

名稱	示例	說明
required	validate[required]	表示必填項
groupRequired[string]	validate[groupRequired[grp]]	在驗證組為 grp 的群組，中至少輸入或選擇一項
condRequired[string]	validate[condRequired[ids]]	當 ids 的某個控件不為空時，那么該控件也為必填項。 可以依賴多項，如：validate[condRequired[id1,id2]][Demo]
minSize[int]	validate[minSize[6]]	最少輸入字符數
maxSize[int]	validate[maxSize[20]]	最多輸入字符數
min[int]	validate[min[1]]	最小值（該項為數字的最小值，注意與 minSize 的區分）
max[int]	validate[max[9999]]	最大值（該項為數字的最大值，注意與 maxSize 的區分）
minCheckbox[int]	validate[minCheckbox[2]]	最少選取的項目數（用於 Checkbox）
maxCheckbox[int]	validate[maxCheckbox[2]]	最多選取的項目數（用於 Checkbox）
date[string]	validate[custom[date]]	驗證日期，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateFormat[string]	validate[custom[dateFormat]]	驗證日期格式，格式為 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
dateTimeFormat[string]	validate[custom[dateTimeFormat]]	驗證日期及時間格式，格式為：YYYY/MM/DD hh:mm:ss AM|PM
dateRange[string]	validate[dateRange[grp1]]	驗證 grp1 的值是否符合日期范圍（開始日期與結束日期） 根據控件的前后位置，如果當前控件在 grp1 元素之后，輸入的日期不能是 grp1 日期的過去。 如果當前控件在 grp1 控件之前，輸入的日期不能是 grp1 日期的未來。[Demo]
dateTimeRange[string]	validate[dateTimeRange[grp1]]	驗證日期及時間范圍，增加了時間的對比，其他的和 dateRange 一樣。
past[string]	validate[past[2012/12/20]]	日期必需是 date 或 date 的過去。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
future[string]	validate[future[now]]	日期必須是 data 或 date 的未來。date 格式可寫作 YYYY/MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D 或 now
equals[string]	validate[equals[id]]	當前控件的值需與控件 id 的值相同
number	validate[custom[number]]	驗證數字
integer	validate[custom[integer]]	驗證整數
phone	validate[custom[phone]]	驗證電話號碼
email	validate[custom[email]]	驗證 E-mail 地址
url	validate[custom[url]]	驗證 url 地址，需以 http://、https:// 或 ftp:// 開頭
ipv4	validate[custom[ipv4]]	驗證 ipv4 地址
onlyNumberSp	validate[custom[onlyNumberSp]]	只接受填數字和空格
onlyLetterSp	validate[custom[onlyLetterSp]]	只接受填英文字母、單引號（'）和空格
onlyLetterNumber	validate[custom[onlyLetterNumber]]	只接受數字和英文字母
custom[自定義規則]	validate[custom[ruleName]]	自定義規則驗證 'ruleName': { 'regex': RegExp, /* 正則表達式，如果正則能匹配內容表示通過 */ 'alertText': '驗證不通過時的提示信息' }
ajax	validate[ajax[ajaxName]]	自定義 ajax 驗證 'ajaxName': { 'url': 'phpajax/ajaxValidateFieldUser.php', /* 驗證程序地址 */ 'extraData': 'name=eric', /* 額外參數 */ 'alertTextOk': '驗證通過時的提示信息', 'alertText': '驗證不通過時的提示信息', 'alertTextLoad': '正在驗證時的提示信息' } /* * 例： * <input type="text" id="email" class="validate[ajax[ajaxName]]"> * 假設填寫的值為：[e-mail] * extraData 設置為：'type=register&verify=abcd' * 提交到后端的 url 為：phpajax/ajaxValidateFieldUser.php?email=[e-mail]&type=register&verify=abcd */ 傳輸方式：get 傳遞參數："fieldId=" + field.attr("id") + "&fieldValue=" + field.val() 額外參數：extraData 可以設置為字符串或對象，會在參數結尾追加 "&extraData" 返回數據格式：json 返回數據內容：[String,Boolean] 第一個值類型為 String，是接收到 fieldId 的值； 第二個值類型為 Boolean，驗證通過返回 true，不通過返回 false 具體請參考 [Demo]
funcCall	validate[funcCall[functionName]]	調用外部函數驗證 functionName(field, rules, i, options)

Ciaoca 增強版增加驗證規則：

名稱	示例	說明
chinese	validate[custom[chinese]]	只接受中文漢字
chinaId	validate[custom[chinaId]]	驗證身份證號碼（僅支持 18 位的身份證號碼）
chinaIdLoose	validate[custom[chinaIdLoose]]	驗證身份證號碼（支持 15 及 18 位的身份證號碼）
chinaZip	validate[custom[chinaZip]]	驗證郵政編碼
qq	validate[custom[qq]]	驗證 QQ 號碼

參數說明

名稱	默認值	說明
validationEventTrigger	'blur'	觸發驗證的事件，支持事件可參考 jQuery 的事件說明。 PS：如果希望只在表單提交時驗證，可以設置為空。或者設置參數 binded:false
binded	true	是否綁定即時驗證
scroll	true	屏幕自動滾動到第一個驗證不通過的位置。
focusFirstField	true	驗證未通過時，是否給第一個不通過的控件獲取焦點。
validateNonVisibleFields	false	是否驗證不可見的元素（如 type="hidden" 的輸入框，或多個輸入控件在選項卡切換中）
showPrompts	true	是否顯示提示信息
showArrow	true	是否顯示提示信息的箭頭
promptPosition	'topRight'	提示信息的位置，可設置為：'topRight', 'topLeft', 'bottomRight', 'bottomLeft', 'centerRight', 'centerLeft', 'inline' 可設置更具體的位置，格式為："方向: X偏移值, Y偏移值"。如：bottomLeft: -20, 5
autoPositionUpdate	false	是否自動調整提示層的位置
autoHidePrompt	false	是否自動隱藏提示信息
autoHideDelay	100000	自動隱藏提示信息的延遲時間 (ms)
fadeDuration	0.3	隱藏提示信息淡出的時間
addPromptClass	''	給提示信息增加 class Ciaoca 增強版中，增加樣式如下： 'formError-noArrow' -- 無箭頭樣式 'formError-text' -- 純文字樣式 'formError-small' -- 精簡版樣式 'formError-white' -- 白色版樣式 可以疊加使用，如：addPromptClass: 'formError-noArrow formError-small'
custom_error_messages	{}	自定義錯誤信息內容 [Demo]
maxErrorsPerField	false	單個元素顯示錯誤提示的最大數量，值設為數值。默認 false 表示不限制。
showOneMessage	false	是否只顯示一個提示信息
doNotShowAllErrosOnSubmit	false	在提交表單時不顯示所有的錯誤信息（建議使用參數 showOneMessage 替代）
addSuccessCssClassToField	''	驗證通過時，給控件增加 class，當再次驗證失敗時，會去除。
addFailureCssClassToField	''	驗證失敗時，給控件增加 class，當再次驗證通過時，會去除。
prettySelect	false	是否使用了美化過的 select 選擇控件 [Demo]
onFieldSuccess	false	控件驗證通過時的回調函數 function(field){}
onFieldFailure	false	控件驗證失敗時的回調函數 function(field){}
onSuccess	false	在表單驗證結果為通過時的回調函數
onFailure	false	在表單驗證結果為失敗時的回調函數 PS：onSuccess 和 onFailure 請參考 [Demo]
onValidationComplete	false	表單提交驗證完成時的回調函數 [Demo] function(form, valid){}，參數： form：表單元素 valid：驗證結果（ture or false） PS：使用此方法后，表單即使驗證通過也不會進行提交，交給定義的回調函數進行操作。
ajaxFormValidation	false	是否使用 Ajax 提交表單（默認使用 GET 方式發送數據）
ajaxFormValidationURL	false	設置 Ajax 提交的 URL，默認使用 form 的 action 屬性
ajaxFormValidationMethod	'get'	設置 Ajax 提交時，發送數據的方式
onAjaxFormComplete	$.noop	表單提交，Ajax 驗證完成后的行為（Function）[Demo] function(status, form, json, options){}
onBeforeAjaxFormValidation	$.noop	表單提交驗證通過后，Ajax 提交之前的回調函數 [Demo] function(form, options){}
ajaxValidCache	{}
isError	false
InvalidFields	[]
isOverflown	false	表單是否在溢出滾動的元素內（即外部元素設置了 overflow:scroll） PS：設置為 ture 后，提示內容的插入位置將更改為在驗證的控件之前插入； 　　此時需要在控件外層再套一個元素，並設置 class="inputContainer"
overflownDIV	''	設置了溢出滾動的元素，格式為 jQuery 的選擇器。
usePrefix	''	使用 ID 前綴
useSuffix	''	使用 ID 后綴
validateAttribute	'class'	存放驗證規則的屬性
bindMethod	'bind'
inlineAjax	false

HTML5 屬性

屬性名稱	說明
data-validation-engine	設置驗證規則 除了使用 class 設置驗證規則外，也可以使用該屬性來設置驗證規則。
data-validation-placeholder	占位符 當位置為必填的控件驗證時，值不能為空，也不能為占位符。
data-prompt-position	自定義提示信息的位置，可設置為："topRight", "topLeft", "bottomRight" "bottomLeft", "centerRight", "centerLeft", "inline" 可設置更具體的位置，格式為："方向:X偏移值,Y偏移值"。如：data-prompt-position="bottomLeft:20,5" PS：偏移值可以為負數
data-prompt-target	載入提示信息的容器，值為元素的 id 僅在 promptPosition 或 data-prompt-position 設為 "inline" 是有效。

錯誤信息屬性（實驗的）

屬性值與驗證規則相對應

<!-- 自定義錯誤信息屬性（實驗支持） --> <input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]" data-errormessage-value-missing="E-mail 不能為空" data-errormessage-custom-error="E-mail 格式應為：[e-mail]" data-errormessage="通用的錯誤提示信息"> 

屬性名稱	對應驗證規則
data-errormessage-value-missing	required groupRequired condRequired
data-errormessage-type-mismatch	past future dateRange dateTimeRange
data-errormessage-pattern-mismatch	creditCard equals
data-errormessage-range-underflow	minSize min minCheckbox
data-errormessage-range-overflow	maxSize max maxCheckbox
data-errormessage-custom-error	custom ajax funcCall
data-errormessage	通用的錯誤提示信息

API 接口

名稱	示例	說明
attach	$('#form_id').validationEngine('attach');	綁定表單驗證
detach	$('#form_id').validationEngine('detach');	移除表單驗證
validate	alert($('#id').validationEngine('validate'));	驗證控件或表單，返回結果 true 或 false
showPrompt	$('#id').validationEngine('showPrompt','提示內容','load');	在該元素上創建一個提示，3 種狀態：'pass', 'error', 'load'
hide	$('#id').validationEngine('hide');	隱藏改元素及元素內的提示
hideAll	$('#id').validationEngine('hideAll');	隱藏頁面上的所有提示
updatePromptsPosition	$('#form_id').validationEngine('updatePromptsPosition')	更新提示層的位置

自定義事件

插件增加的自定義事件，可參考 [Demo]

名稱	示例	說明
jqv.form.validating	$('#form_id').bind('jqv.form.validating', function(event){});	表單驗證時
jqv.form.result	$('#form_id').bind('jqv.form.result', function(event, errorFound){});	表單驗證完成。返回參數說明：   errorFound：表單驗證不通過（true 或 false）
jqv.field.result	$('#field_id').bind('jqv.field.result', function(event, field, isError, promptText){});	單個控件驗證完成。返回參數說明：   field：控件對象 isError：控件驗證不通過（true 或 false） promptText：提示信息