jQuery 表单验证插件，jQuery Validation Engine用法详解
功能強大的 jQuery 表單驗證插件，適用于日常的 E-mail、電話號碼、網址等驗證及 Ajax 驗證，除自身擁有豐富的驗證規則外，還可以添加自定義的驗證規則。
jQuery Validation Engine v2.6.2：兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+，要求jQuery版本1.7以上。下載地址：http://code.ciaoca.com/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2.zip。另有Ciaoca 中文增強版：下載地址，http://code.ciaoca.com/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2-ciaoca.zip。
一、使用方法
載入 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> <!--默認的選項的value須為空--如下--><select?class="validate[required]"><option value="">請選擇</option></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]] | 驗證電話號碼 |
| 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]]">?*?假設填寫的值為：ciaoca@gmail.com?*?extraData?設置為：'type=register&verify=abcd'?*?提交到后端的?url?為：phpajax/ajaxValidateFieldUser.php?email=ciaoca@gmail.com&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]] | 驗證郵政編碼 |
| 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?格式應為：someone@nowhere.com"??data-errormessage="通用的錯誤提示信息">?| data-errormessage-value-missing |
|
| data-errormessage-type-mismatch |
|
| data-errormessage-pattern-mismatch |
|
| data-errormessage-range-underflow |
|
| data-errormessage-range-overflow |
|
| data-errormessage-custom-error |
|
| 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：提示信息 |
七、相關信息
作者網站：posted on 2016-04-06 08:48?代碼養家 閱讀(...) 評論(...) 編輯 收藏
轉載于:https://www.cnblogs.com/wangzl1163/p/6341183.html
總結
以上是生活随笔為你收集整理的jQuery 表单验证插件，jQuery Validation Engine用法详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 考考大家的数学，计算以下计算公式的结果
- 下一篇： 复利计算5.0——结对（总结）