當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 表单验证插件，jQuery Validation Engine用法详解

發(fā)布時間：2025/4/16 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 表单验证插件，jQuery Validation Engine用法详解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

jQuery 表單驗(yàn)證插件，jQuery Validation Engine用法詳解

功能強(qiáng)大的 jQuery 表單驗(yàn)證插件，適用于日常的 E-mail、電話號碼、網(wǎng)址等驗(yàn)證及 Ajax 驗(yàn)證，除自身擁有豐富的驗(yàn)證規(guī)則外，還可以添加自定義的驗(yàn)證規(guī)則。

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 中文增強(qiáng)版：下載地址，http://code.ciaoca.com/jquery/validation-engine/version/jQuery-Validation-Engine-2.6.2-ciaoca.zip。

一、使用方法

載入 CSS 文件

載入 JavaScript 文件

給表單加上 ID

? <form?id="form_id"?...>? ...? </form>?

給控件添加驗(yàn)證類型

? <input?type="text"?class="validate[required]">? <input?type="checkbox"?class="validate[required]">? <select?class="validate[required]"></select> <select?class="validate[required]"><option value="">請選擇</option></select>?<textarea?class="validate[required]"></textarea>

設(shè)置驗(yàn)證

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

支持鏈?zhǔn)讲僮?/h3> $('#form_id').validationEngine().css({border:'2px?solid?#000'});

二、驗(yàn)證類型

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

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

名稱示例說明

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

Ciaoca 增強(qiáng)版增加驗(yàn)證規(guī)則：

名稱示例說明

chinese	validate[custom[chinese]]	只接受中文漢字
chinaId	validate[custom[chinaId]]	驗(yàn)證身份證號碼（僅支持 18 位的身份證號碼）
chinaIdLoose	validate[custom[chinaIdLoose]]	驗(yàn)證身份證號碼（支持 15 及 18 位的身份證號碼）
chinaZip	validate[custom[chinaZip]]	驗(yàn)證郵政編碼
qq	validate[custom[qq]]	驗(yàn)證 QQ 號碼

三、參數(shù)說明

名稱默認(rèn)值說明

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

四、HTML5 屬性

屬性名稱說明

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

錯誤信息屬性（實(shí)驗(yàn)的）

屬性值與驗(yàn)證規(guī)則相對應(yīng)

? <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?格式應(yīng)為：someone@nowhere.com"??data-errormessage="通用的錯誤提示信息">? 屬性名稱對應(yīng)驗(yàn)證規(guī)則

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');	綁定表單驗(yàn)證
detach	$('#form_id').validationEngine('detach');	移除表單驗(yàn)證
validate	alert($('#id').validationEngine('validate'));	驗(yàn)證控件或表單，返回結(jié)果 true 或 false
showPrompt	$('#id').validationEngine('showPrompt','提示內(nèi)容','load');	在該元素上創(chuàng)建一個提示，3 種狀態(tài)：'pass', 'error', 'load'
hide	$('#id').validationEngine('hide');	隱藏改元素及元素內(nèi)的提示
hideAll	$('#id').validationEngine('hideAll');	隱藏頁面上的所有提示
updatePromptsPosition	$('#form_id').validationEngine('updatePromptsPosition')	更新提示層的位置

六、自定義事件

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

名稱示例說明

jqv.form.validating

$('#form_id').bind('jqv.form.validating', function(event){});

表單驗(yàn)證時

jqv.form.result

$('#form_id').bind('jqv.form.result', function(event, errorFound){});

表單驗(yàn)證完成。返回參數(shù)說明：

errorFound：表單驗(yàn)證不通過（true 或 false）

jqv.field.result

$('#field_id').bind('jqv.field.result', function(event, field, isError, promptText){});

單個控件驗(yàn)證完成。返回參數(shù)說明：

field：控件對象

isError：控件驗(yàn)證不通過（true 或 false）

promptText：提示信息

七、相關(guān)信息

作者網(wǎng)站：

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

相關(guān)文檔：

Github

中文文檔

授權(quán)協(xié)議：

MIT

posted on 2016-04-06 08:48?代碼養(yǎng)家閱讀(...) 評論(...) 編輯收藏

轉(zhuǎn)載于:https://www.cnblogs.com/wangzl1163/p/6341183.html

總結(jié)

以上是生活随笔為你收集整理的jQuery 表单验证插件，jQuery Validation Engine用法详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：考考大家的数学，计算以下计算公式的结果
下一篇：复利计算5.0——结对（总结）