目錄 1.      jQuery formValidator是什么？2.      jQuery formValidator能做什么，不能做什么？3.      什么情況下，我應(yīng)該使用jQuery formValidator？4.      快速開(kāi)始5.      使用jQuery formValidator必須加載的文件6.      jQuery formValidator插件的API幫助7.      其他補(bǔ)遺1. jQuery formValidator表單驗(yàn)證插件是什么？ [top]         jQuery formValidator表單驗(yàn)證插件是客戶(hù)端表單驗(yàn)證插件。
      在做B/S開(kāi)發(fā)的時(shí)候，我們經(jīng)常涉及到很多表單驗(yàn)證，例如新用戶(hù)注冊(cè)，填寫(xiě)個(gè)人資料，錄入一些常規(guī)數(shù)據(jù)等等。在這之前，頁(yè)面開(kāi)發(fā)者（JavaScript開(kāi)發(fā)者）需要編寫(xiě)大量的JavaScript來(lái)進(jìn)行表單元素的校驗(yàn)，而這些校驗(yàn)在平時(shí)開(kāi)發(fā)中不停的重復(fù)書(shū)寫(xiě)。
      常見(jiàn)的校驗(yàn)如不能為空，必須滿(mǎn)足長(zhǎng)度要求，必須為數(shù)字，必須為Email等等。一般要判斷的表單元素比較多，開(kāi)發(fā)過(guò)程就顯得枯燥無(wú)味——重復(fù)的代碼不斷重復(fù)，而且可能還要兼容多種瀏覽器，更多的考慮因素使人頭疼不已。由于每個(gè)要校驗(yàn)的頁(yè)面雖然邏輯基本相同，但是在大多數(shù)情況下，出于種種原因，開(kāi)發(fā)者寧愿再編寫(xiě)一套JS文件，為了便于管理。
      jQuery formValidator表單插件致力于改善這一過(guò)程。你只關(guān)心業(yè)務(wù)邏輯，而無(wú)需關(guān)系實(shí)現(xiàn)過(guò)程,只需簡(jiǎn)單的配置，無(wú)需寫(xiě)代碼就能實(shí)現(xiàn)表單的檢驗(yàn)。它包括常規(guī)檢驗(yàn)功能和可擴(kuò)展校驗(yàn)功能。針對(duì)每個(gè)表單元素你只需要寫(xiě)一行配置信息就能完成校驗(yàn)。而這些配置信息無(wú)需寫(xiě)入表單元素，實(shí)現(xiàn)了js代碼和html代碼的分離。這樣做的好處，使B/S開(kāi)發(fā)過(guò)程中，分工更加明確，頁(yè)面設(shè)計(jì)著只需關(guān)心他的頁(yè)面（設(shè)計(jì)的時(shí)候不必?fù)?dān)心把腳本弄壞了），javascript開(kāi)發(fā)者只需關(guān)心腳本的開(kāi)發(fā)。
      而插件本身包含的校驗(yàn)方式可以有無(wú)數(shù)種，只要你擴(kuò)展正則表達(dá)式和函數(shù)。本插件于同類(lèi)校驗(yàn)插件大的區(qū)別：校驗(yàn)功能可以擴(kuò)展；實(shí)現(xiàn)了校驗(yàn)代碼于html代碼的完全分離；你只需寫(xiě)一行配置信息就能完成一個(gè)表單元素的所有校驗(yàn)。插件本身提供了很多回調(diào)函數(shù)，使調(diào)用者能大限度的發(fā)揮自己的想象能力來(lái)完成自己的業(yè)務(wù)需求。在同一個(gè)頁(yè)面你可以擁有很多個(gè)校驗(yàn)組，你只需在提交的按鈕那里調(diào)用
return jQuery.formValidator.pageIsValid('校驗(yàn)組號(hào)') 來(lái)完成多個(gè)組的校驗(yàn)，互不干擾。
     插件具備跨瀏覽器的能力。目前在ie和ff兩種瀏覽器下調(diào)試通過(guò)，你不用再考慮在多瀏覽器下如何兼容，jQuery formValidator幫你做到了這些。 2. jQuery formValidator能做什么，不能做什么？[top] jQuery formValidator表單校驗(yàn)插件支持的驗(yàn)證功能（還有很多功能沒(méi)有羅列）羅列如下：

• 支持所有類(lèi)型客戶(hù)端控件的校驗(yàn)
• 支持jQuery所有的選擇器語(yǔ)法，只要控件有唯一ID和type屬性。
• 支持函數(shù)和正則表達(dá)式的擴(kuò)展。提供擴(kuò)展庫(kù)formValidatorReg.js，你可以自由的添加、修改里面的內(nèi)容。
• 支持2種校驗(yàn)?zāi)Ｊ?。第一種：文字提示(showword模式)；第二種：彈出窗口提示(showalert模式)
• 支持多個(gè)校驗(yàn)組。如果一個(gè)頁(yè)面有多個(gè)提交按鈕，分別做不同得提交，提交前要做不同的校驗(yàn)，所以你得用到校驗(yàn)組的功能。
• 支持4種狀態(tài)的信息提示功能，可以靈活的控制4種狀態(tài)是否顯示。第一種：剛打開(kāi)網(wǎng)頁(yè)的時(shí)候進(jìn)行提示；第二種：獲得焦點(diǎn)的時(shí)候進(jìn)行提示；第三種：失去焦點(diǎn)時(shí)，校驗(yàn)成功時(shí)候的提示；第四種：失去焦點(diǎn)時(shí)，校驗(yàn)失敗的錯(cuò)誤提示。
• 支持自動(dòng)構(gòu)建提示層。
• 支持自定義錯(cuò)誤提示信息。
• 支持控件的字符長(zhǎng)度、值范圍、選擇個(gè)數(shù)的控制。值范圍支持?jǐn)?shù)值型和字符型；選擇的個(gè)數(shù)支持radio/checkbox/select三種控件
• 支持2個(gè)控件值的比較。目前可以比較字符串和數(shù)值型。
• 支持服務(wù)器端校驗(yàn)。
• 支持輸入格式的校驗(yàn)。

jQuery formValidator不能做的：

• 目前對(duì)控件ID是動(dòng)態(tài)產(chǎn)生的情況支持的不是很好。例如asp.net里的gridview控件，因?yàn)樗拿啃袛?shù)據(jù)都是動(dòng)態(tài)產(chǎn)生的，捕捉不到控件的ID。不過(guò)你硬要寫(xiě)，也是能實(shí)現(xiàn)的。
• 其他沒(méi)有提到的，很希望你能告訴我們。

3. 什么情況下，我應(yīng)該使用jQuery formValidator？ [top] 只要控件ID是一定的，即：控件ID是你自己指定的，這種情況你都可以調(diào)用。當(dāng)然動(dòng)態(tài)產(chǎn)生ID的，你也可以調(diào)用。jQuery formValidator可以幫助你減輕客戶(hù)端校驗(yàn)編程的壓力，讓你有更多的精力投入對(duì)業(yè)務(wù)的關(guān)注中。 無(wú)論你是大型系統(tǒng)還是小型系統(tǒng)都適合調(diào)用本插件，本插件的壓縮版本只有6K（可能本網(wǎng)頁(yè)的一張圖片就有幾十K），個(gè)人認(rèn)為可以忽略網(wǎng)頁(yè)的加載時(shí)間。 4. 快速開(kāi)始 [top] 你可以有兩種方法快速開(kāi)始（看到效果）

• 直接查看Demo頁(yè)面（goto>>）
• 下載最新的版本，直接在本地查看。（goto>>）

無(wú)論是那種方法，演示的例子中都有詳細(xì)的步驟，以及對(duì)應(yīng)的代碼。 5. 使用插件必須加載的文件 [top] //加載jQuery類(lèi)庫(kù)

//加載插件的樣式庫(kù)，如果你是自動(dòng)構(gòu)建提示層，請(qǐng)加載validatorAuto.css

//加載插件

//加載擴(kuò)展庫(kù)
6 jQuery formValidator插件的API幫助[top]

目前支持5種大的校驗(yàn)方式，分別是：inputValidator（針對(duì)input、textarea、select控件的字符長(zhǎng)度、值范圍、選擇個(gè)數(shù)的控制）、compareValidator（提供2個(gè)對(duì)象的比較，目前可以比較字符串和數(shù)值型）、ajaxValidator（通過(guò)ajax到服務(wù)器上做數(shù)據(jù)校驗(yàn)）、regexValidator（提供可擴(kuò)展的正則表達(dá)式庫(kù)）、functionValidator （提供可擴(kuò)展函數(shù)庫(kù)來(lái)做校驗(yàn)） 每種格式支持的控件類(lèi)型如下： input textarea select 校驗(yàn)方式 text radio checkbox file password textarea select-one inputValidator √ √ √ √ √ √ √ compareValidator √ √ √ √ ajaxValidator √ √ √ √ √ regexValidator √ √ √ √ functionValidator √ √ √ √ √ √ √ 如果你用了不支持的校驗(yàn)功能，插件將忽略這個(gè)校驗(yàn)功能。
插件目前提示錯(cuò)誤，有兩種模式：showword和showalert,即文字提示和窗口提示，下面的4大驗(yàn)證方式，針對(duì)showalert這種方式不是都必須的，有些配置是沒(méi)有作用的 下面分別羅列全局初始化和5種校驗(yàn)方式公開(kāi)的屬性
formValidator:	用來(lái)做初始化的類(lèi)型，必須先執(zhí)行。（"√"為showalert可用參數(shù)）
屬性 屬性名稱(chēng) 默認(rèn)值 showalert 詳細(xì)解釋 validatorgroup 校驗(yàn)組 "1" √ 一個(gè)頁(yè)面的控件可以分成多個(gè)組，分開(kāi)校驗(yàn) empty 是否可以為空 false √ automodify 輸入錯(cuò)誤離開(kāi)焦點(diǎn)的時(shí)候，自動(dòng)修復(fù)錯(cuò)誤 false √ 先給出提示然后，自動(dòng)修復(fù)，目前只支持text、file、textarea三種類(lèi)型 onempty 空時(shí)候的提示 "輸入內(nèi)容為空" 可以為空，為空時(shí)候的提示。為空者不顯示 onshow 顯示時(shí)候的提示 "請(qǐng)輸入內(nèi)容" 為空者不顯示 onfocus 獲得焦點(diǎn)的提示 "請(qǐng)輸入內(nèi)容" 為空者不顯示 oncorrect 輸入正確后的提示 "輸入正確" 當(dāng)你焦點(diǎn)離開(kāi)控件的時(shí)候，如果輸入正確將出現(xiàn)該提示。為空者不顯示 tipid 顯示錯(cuò)誤的容器ID 表單ID+"Tip" 如果不自動(dòng)構(gòu)建提示層，表示提示成的ID號(hào) 如果自動(dòng)構(gòu)建提示層，表示提示層相對(duì)的目標(biāo)控件 tipcss 自動(dòng)構(gòu)建的提示層的樣式 "left":"10px", "top":"1px", "height":"20px", "width":"250px" 主要用于定位自動(dòng)構(gòu)建的提示層 defaultvalue 默認(rèn)值 null √ 所有input和select表單。如果你不設(shè)置就保持原值，一旦設(shè)置就設(shè)為默認(rèn)值。
inputValidator：
屬性 屬性名稱(chēng) 默認(rèn)值 詳細(xì)解釋 type 比較類(lèi)型 "size" (對(duì)select無(wú)效) "size":表示比較長(zhǎng)度 "number":數(shù)值型比較 "string":字符型比較 min 最小長(zhǎng)度/值 0 默認(rèn)數(shù)值型。如果進(jìn)行字符比較，請(qǐng)收入字符型 對(duì)select-one而言inputValidator里的參數(shù)min和max表示選擇的索引號(hào)范圍 對(duì)select-multiple而言inputValidator里的參數(shù)min和max表示選擇的個(gè)數(shù) max 大長(zhǎng)度/值 99999999999 同上 onerror 發(fā)生錯(cuò)誤的提示 "輸入錯(cuò)誤" 為空者不顯示。 onerrormin 比min屬性小的提示 null 當(dāng)用戶(hù)輸入的值比min屬性小的時(shí)候的錯(cuò)誤提示 onerrormax 比max屬性大的提示 null 當(dāng)用戶(hù)輸入的值比max屬性大的時(shí)候的錯(cuò)誤提示 empty 控件文本值是否允許兩邊為空 兩邊都允許出現(xiàn)空 默認(rèn)值{leftempty:true,rightempty:true,emptyerror:null} leftempty:表示左邊是否允許為空 rightempty:表示右邊是否允許為空 emptyerror：出現(xiàn)該錯(cuò)誤的時(shí)候的提示，如果為null，則利用onerror屬性來(lái)提示錯(cuò)誤。
compareValidator：
屬性 屬性名稱(chēng) 默認(rèn)值 詳細(xì)解釋 desid 要比較控件的ID "" 要跟源目標(biāo)進(jìn)行比較的目標(biāo)ID operateor 比較符號(hào) "=" 一共有如下幾種類(lèi)型:=、!=、>、>=、<、<= datatype 數(shù)據(jù)類(lèi)型 "string" 目前只支持2種:"string"、"number" onerror 發(fā)生錯(cuò)誤的提示 "輸入錯(cuò)誤" 為空者不顯示。
regexValidator:
屬性 屬性名稱(chēng) 默認(rèn)值 詳細(xì)解釋 regexp 正則表達(dá)式 "" 采用的是顯式構(gòu)造函數(shù)new RegExp("pattern"[,"flags"]); 由于Javascript 中'' 被用作轉(zhuǎn)義字符，所以在使用顯示構(gòu)造函數(shù)構(gòu)造實(shí)例對(duì)象的時(shí)候，需要使用'\' 代替'' param 附加參數(shù) "i" g：代表可以進(jìn)行全局匹配。 i：代表不區(qū)分大小寫(xiě)匹配。 m：代表可以進(jìn)行多行匹配。 可以任意組合,當(dāng)然也可以不加參數(shù) datatype 數(shù)據(jù)類(lèi)型 "string" "string":自己寫(xiě)的表達(dá)式，"enum":枚舉名。具體請(qǐng)見(jiàn)demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項(xiàng)目名和表達(dá)式。 onerror: 發(fā)生錯(cuò)誤的提示 "輸入錯(cuò)誤" 為空者不顯示。
ajaxValidator:	幾乎所有的屬性跟$.ajax()的屬性一樣，請(qǐng)參考$.ajax()函數(shù)的幫助
屬性 屬性名稱(chēng) 默認(rèn)值 詳細(xì)解釋 type 請(qǐng)求的類(lèi)型 "GET" "POST" 或 "GET" url 發(fā)送到的URL地址 "" datatype 返回的數(shù)據(jù)類(lèi)型 "html" xml、html、script、json data 數(shù)據(jù) "" async 是否以異步的方式發(fā)送 true success 當(dāng)請(qǐng)求成功時(shí)調(diào)用的函數(shù) null processdata 自動(dòng)處理返回的數(shù)據(jù)為字符串 true 在默認(rèn)的情況下，如果data選項(xiàng)傳進(jìn)的數(shù)據(jù)是一個(gè)對(duì)象而不是字符串，將會(huì)自動(dòng)地被處理和轉(zhuǎn)換成一個(gè)查詢(xún)字符串 complete 當(dāng)請(qǐng)求完成時(shí)調(diào)用的函數(shù) null beforesend 當(dāng)請(qǐng)求前時(shí)調(diào)用的函數(shù) null 有個(gè)一個(gè)參數(shù)，根$.ajax里的beforeSend參數(shù)一樣。 buttons 你點(diǎn)提交的按鈕(組)jQuery對(duì)象 null 當(dāng)你觸發(fā)了ajax校驗(yàn)，buttons里對(duì)應(yīng)的按鈕（組）就會(huì)灰掉，一直等待服務(wù)器返回?cái)?shù)據(jù)為止 error 當(dāng)請(qǐng)求失敗時(shí)調(diào)用的函數(shù) "請(qǐng)求失敗" 你可以自己定義這個(gè)錯(cuò)誤，在error里自動(dòng)打出。為空者不顯示。
functionValidator
屬性 屬性名稱(chēng) 默認(rèn)值 返回值的解釋 fun 外部函數(shù)名() 參數(shù)1:元素的值, 參數(shù)2:元素對(duì)象 默認(rèn)當(dāng)作處理過(guò)程 true/false 校驗(yàn)成功/失敗 字符串 校驗(yàn)失敗，返回值當(dāng)作自定義錯(cuò)誤 無(wú) 處理過(guò)程   onerror 發(fā)生錯(cuò)誤的提示 "輸入錯(cuò)誤" 函數(shù)return false的時(shí)候，顯示該錯(cuò)誤信息
公共函數(shù):	主要是設(shè)置全局參數(shù)和判斷是否通過(guò)校驗(yàn)
函數(shù)名 函數(shù)說(shuō)明 $.formValidator.initConfig 參數(shù)：配置類(lèi)型 屬性 默認(rèn)值 說(shuō)明 validatorgroup "1" 你要針對(duì)哪個(gè)組進(jìn)行配置 formid "" 要自動(dòng)注冊(cè)pageIsValid函數(shù)的表單ID號(hào) alertmessage false 是否彈出窗口 autotip false 是否自動(dòng)構(gòu)建提示層 onsuccess null 該組校驗(yàn)通過(guò)后的回調(diào)函數(shù),返回false，阻止表單的提交 submitonce false 校驗(yàn)通過(guò)后，是否灰掉所有的提交按鈕 onerror null 該組校驗(yàn)失敗后的回調(diào)函數(shù)，有兩個(gè)參數(shù) 參數(shù)1 一個(gè)校驗(yàn)沒(méi)有通過(guò)的錯(cuò)誤信息 參數(shù)2 一個(gè)校驗(yàn)沒(méi)有通過(guò)的元素對(duì)象   debug false 是否處于調(diào)試模式。true:不提交表單   $.formValidator.pageIsValid 一個(gè)參數(shù)：不是配置類(lèi)型 validatorgroup "1" 你要針對(duì)哪個(gè)組進(jìn)行驗(yàn)證   $.formValidator.isOneValid 一個(gè)參數(shù)：當(dāng)時(shí)設(shè)置驗(yàn)證的表單元素ID。 返回是否校驗(yàn)成功的信息。 $.formValidator.setFailState function("tipid","顯示的信息") 在showword模式下，如果你的額外校驗(yàn)沒(méi)有通過(guò)，你可以通過(guò)它來(lái)設(shè)置成失敗信息和狀態(tài) $.formValidator.getLength function("表單元素id") checkbox或radiobutton表示(同組)選擇的個(gè)數(shù)。 對(duì)select-one，選擇索引的值 對(duì)select-multiple，inputValidator里的參數(shù)min和max表示選擇的個(gè)數(shù) 其它input表示的表示字符長(zhǎng)度。 $.formValidator.retSetTipState function(校驗(yàn)組號(hào)) 來(lái)把該組的提示內(nèi)容恢復(fù)到onshow狀態(tài)

         
分享標(biāo)題：jQueryformValidator表單驗(yàn)證插件(詳解)-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://weahome.cn/article/cccdoh.html