基本介紹
jQuery formValidator表單驗證外掛程式是什麼,jQuery formValidator能做什麼,jQuery formValidator外掛程式的API幫助,
jQuery formValidator表單驗證外掛程式是什麼
在做B/S開發的時候，我們經常涉及到很多表單驗證，例如新用戶註冊，填寫個人資料，錄入一些常規數據等等。在這之前，頁面開發者（JavaScript開發者）需要編寫大量的JavaScript來進行表單元素的校驗，而這些校驗在平時開發中不停的重複書寫。
常見的校驗如不能為空，必須滿足長度要求，必須為數字，必須為Email等等。一般要判斷的表單元素比較多，開發過程就顯得枯燥無味——重複的代碼不斷重複，而且可能還要兼容多種瀏覽器，更多的考慮因素使人頭疼不已。由於每個要校驗的頁面雖然邏輯基本相同，但是在大多數情況下，出於種種原因，開發者寧願再編寫一套JS檔案，為了便於管理。
jQuery formValidator表單外掛程式致力於改善這一過程。你只關心業務邏輯，而無需關係實現過程,只需簡單的配置，無需寫代碼就能實現表單的檢驗。它包括常規檢驗功能和可擴展校驗功能。針對每個表單元素你只需要寫一行配置信息就能完成校驗。而這些配置信息無需寫入表單元素，實現了js代碼和html代碼的分離。這樣做的好處，使B/S開發過程中，分工更加明確，頁面設計著只需關心他的頁面（設計的時候不必擔心把腳本弄壞了），javascript開發者只需關心腳本的開發。
而外掛程式本身包含的校驗方式可以有無數種，只要你擴展正則表達式和函式。本外掛程式於同類校驗外掛程式最大的區別：校驗功能可以擴展；實現了校驗代碼於html代碼的完全分離；你只需寫一行配置信息就能完成一個表單元素的所有校驗。外掛程式本身提供了很多回調函式，使調用者能最大限度的發揮自己的想像能力來完成自己的業務需求。 在同一個頁面你可以擁有很多個校驗組，你只需在提交的按鈕那裡調用
return jQuery.formValidator.pageIsValid('校驗組號') 來完成多個組的校驗，互不干擾。
外掛程式具備跨瀏覽器的能力。目前在ie和ff兩種瀏覽器下調試通過，你不用再考慮在多瀏覽器下如何兼容，jQuery formValidator幫你做到了這些。
jQuery formValidator能做什麼
jQuery formValidator表單校驗外掛程式支持的驗證功能（還有很多功能沒有羅列）羅列如下：
支持所有類型客戶端控制項的校驗 支持jQuery所有的選擇器語法，只要控制項有唯一ID和type屬性。 支持函式和正則表達式的擴展。提供擴展庫formValidatorReg.js，你可以自由的添加、修改裡面的內容。 支持2種校驗模式。第一種：文字提示(showword模式)；第二種：彈出視窗提示(showalert模式) 支持多個校驗組。如果一個頁面有多個提交按鈕，分別做不同得提交，提交前要做不同的校驗，所以你得用到校驗組的功能。 支持4種狀態的信息提示功能，可以靈活的控制4種狀態是否顯示。第一種：剛打開網頁的時候進行提示；第二種：獲得焦點的時候進行提示；第三種：失去焦點時，校驗成功時候的提示；第四種：失去焦點時，校驗失敗的錯誤提示。 支持自動構建提示層。 支持自定義錯誤提示信息。 支持控制項的字元長度、值範圍、選擇個數的控制。值範圍支持數值型和字元型；選擇的個數支持radio/checkbox/select三種控制項 支持2個控制項值的比較。目前可以比較字元串和數值型。 支持伺服器端校驗。 支持輸入格式的校驗。
jQuery formValidator外掛程式的API幫助
目前支持5種大的校驗方式，分別是：inputValidator（針對input、textarea、select控制項的字元長度、值範圍、選擇個數的控制）、compareValidator（提供2個對象的比較，目前可以比較字元串和數值型）、ajaxValidator（通過ajax到伺服器上做數據校驗）、regexValidator（提供可擴展的正則表達式庫） 、functionValidator （提供可擴展函式館來做校驗） 每種格式支持的控制項類型如下： input textarea select 校驗方式 ---------------------------text radio checkbox file password textarea select-one inputValidator--------√----√------√-----------√----√------------√----------√ compareValidator---√----√------√-----------√ ajaxValidator----------√----√------√-----------√----√ regexValidator--------√----√------√-----------√ functionValidator-----√---- √------√-----------√----√------------√----------√ 如果你用了不支持的校驗功能，外掛程式將忽略這個校驗功能。 | |||
外掛程式目前提示錯誤，有兩種模式：showword和showalert,即文字提示和視窗提示，下面的4大驗證方式，針對showalert這種方式不是都必須的，有些配置是沒有作用的 下面分別羅列全局初始化和5種校驗方式公開的屬性 | |||
formValidator: | 用來做初始化的類型，必須先執行。（"√"為showalert可用參數） | ||
屬性屬性名稱默認值 showalert 詳細解釋 validatorGroup 校驗組 "1" √ 一個頁面的控制項可以分成多個組，分開校驗 empty 是否可以為空 false √ autoModify 輸入錯誤離開焦點的時候，自動修復錯誤 true √ 先給出提示然後，自動修復，目前只支持text、file、textarea三種類型 onEmpty 空時候的提示 "輸入內容為空" 可以為空，為空時候的提示。為空者不顯示 onShow 顯示時候的提示 "請輸入內容" 為空者不顯示 onFocus 獲得焦點的提示 "請輸入內容" 為空者不顯示 onCorrect 輸入正確後的提示 "輸入正確" 當你焦點離開控制項的時候，如果輸入正確將出現該提示。為空者不顯示 tipID 顯示錯誤的容器ID 表單ID+"Tip" 如果不自動構建提示層，表示提示成的ID號 如果自動構建提示層，表示提示層相對的目標控制項 tipCss 自動構建的提示層的樣式 "left":"10px", "top":"1px", "height":"20px", "width":"250px" 主要用於定位自動構建的提示層 forceValid 強制輸入的值必須有效 true √ 是否把一個全形字元當做2個長度的參數 ajax 提交伺服器 true √ ajaxValidator是否把該表單提交給伺服器 defaultValue 默認值 null √ 所有input和select表單。如果你不設定就保持原值，一旦設定就設為默認值。 triggerEvent 默認值 blur √ 當前支持2種屬性值： blur:失去焦點的時候觸發 change:當輸入框裡的值發生改變的時候觸發 trimValue 默認值 false √ 當輸入前後帶空格的字元，是否自動把空字元去掉。 | |||
inputValidator： | |||
屬性屬性名稱默認值詳細解釋 type 比較類型 "size" （對select無效） "size":表示比較長度 ，默認值 "number":數值型比較 "string":字元型比較 "date":短日期類型 "datetime":長日期類型 min 最小長度/值 0 默認數值型。如果進行字元比較，請收入字元型 對select-one而言inputValidator里的參數min和max表示選擇的索引號範圍 對select-multiple而言inputValidator里的參數min和max表示選擇的個數 max 最大長度/值 99999999999 同上 onError 發生錯誤的提示 "輸入錯誤" 為空者不顯示。 onErrorMin 比min屬性小的提示 null 當用戶輸入的值比min屬性小的時候的錯誤提示 onErrorMax 比max屬性大的提示 null 當用戶輸入的值比max屬性大的時候的錯誤提示 empty 控制項文本值是否允許兩邊為空兩邊都允許出現空默認值{leftEmpty:true,rightEmpty:true,emptyError:null} leftEmpty:表示左邊是否允許為空 rightEmpty:表示右邊是否允許為空 emptyError：出現該錯誤的時候的提示，如果為null，則利用onError屬性來提示錯誤。 | |||
compareValidator： | |||
屬性屬性名稱默認值詳細解釋 desID 要比較控制項的ID "" 要跟源目標進行比較的目標ID operateor 比較符號 "=" 一共有如下幾種類型：=、!=、>、>=、<、<= dataType 數據類型 "string" 目前只支持2種："string"、"number","datetime","date" onError 發生錯誤的提示 "輸入錯誤" 為空者不顯示。 | |||
regexValidator: | |||
屬性屬性名稱默認值詳細解釋 regExp 正則表達式或表達式數組 "" 採用的是顯式構造函式new RegExp("pattern"[,"flags"]); 由於Javascript 中'\' 被用作轉義字元，所以在使用顯示構造函式構造實例對象的時候，需要使用'\\' 代替'\' param 附加參數 "i" g：代表可以進行全局匹配。 i：代表不區分大小寫匹配。 m：代表可以進行多行匹配。 可以任意組合，當然也可以不加參數 compareType 比較類型 "||" "||"或的關係 "&&"並列 dataType 數據類型 "string" "string":自己寫的表達式，"enum":枚舉名，字元串數組類型。具體請見demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達式。 onError: 發生錯誤的提示 "輸入錯誤" 為空者不顯示。 | |||
ajaxValidator: | |||
屬性屬性名稱默認值詳細解釋 type 請求的類型 "GET" "POST" 或 "GET" url 傳送到的URL地址 "" 在伺服器端，你可以通過name為clientid獲取觸發驗證的控制項ID名 dataType 返回的數據類型 "html" xml、html、script、json、text timeout 逾時設定 999 data 數據 "" async 是否以異步的方式傳送 true success 當請求成功時調用的函式 null processData 自動處理返回的數據為字元串 true 在默認的情況下，如果data選項傳進的數據是一個對象而不是字元串，將會自動地被處理和轉換成一個查詢字元串 complete 當請求完成時調用的函式 null beforeSend 當請求前時調用的函式 null 有個一個參數，根$.ajax里的beforeSend參數一樣。 buttons 你點提交的按鈕（組）jQuery對象 null 當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待伺服器返回數據為止 error 當請求失敗時調用的提示 "請求失敗" 你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。 onWait 正在校驗的提示 "正在等待伺服器返回數據" onError 校驗沒有通過的提示 "伺服器校驗沒有通過" 注意： 1、在提交的時候，自動追加clientID參數，表示觸發校驗的控制項ID 2、在提交的時候，自動追加rand參數，這個是個隨機數 3、幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函式的幫助 | |||
functionValidator | |||
屬性屬性名稱默認值返回值的解釋 fun 外部函式名() 參數1:元素的值， 參數2:元素對象默認當作處理過程 true/false 校驗成功/失敗 字元串校驗失敗，返回值當作自定義錯誤 無處理過程 onError 發生錯誤的提示 "輸入錯誤" 函式return false的時候，顯示該錯誤信息 | |||
公共函式： | 主要是設定全局參數和判斷是否通過校驗 | ||
函式名函式說明 $.formValidator.initConfig 參數：配置類型 屬性默認值說明 validatorGroup "1" 你要針對哪個組進行配置 formID "" 要自動註冊pageIsValid函式的表單ID號 alertMessage false 是否彈出視窗 autoTip false 是否自動構建提示層 errorFocus true 發生錯誤的時候，第一個出錯控制項是否獲得焦點 forceValid true 是否一直輸入正確為止才允許離開焦點 wideWord true 是否把一個全形字元當做2個長度 onSuccess null 該組校驗通過後的回調函式，返回false，阻止表單的提交 submitOnce false 校驗通過後，是否灰掉所有的提交按鈕 submitAfterAjaxPrompt 當前有數據正在進行伺服器端校驗，請稍候 onError null 該組校驗失敗後的回調函式， 有兩個參數 參數1 一個校驗沒有通過的錯誤信息 參數2 一個校驗沒有通過的元素對象 參數3 所有的錯誤信息數組，你可以通過$.map來遍歷 debug false 是否處於調試模式。true:不提交表單 $.formValidator.pageIsValid 一個參數： 不是配置類型 validatorGroup "1" 你要針對哪個組進行驗證 $.formValidator.isOneValid 一個參數： 當時設定驗證的表單元素ID。 返回是否校驗成功的信息。 $.formValidator.setFailState function("tipid","顯示的信息") 在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設定成失敗信息和狀態 $.formValidator.getLength function("表單元素id") checkbox或radiobutton表示（同組）選擇的個數。 對select-one，選擇索引的值 對select-multiple，inputValidator里的參數min和max表示選擇的個數 其它input表示的表示字元長度。 $.formValidator.retSetTipState function（校驗組號） 來把該組的提示內容恢復到onshow狀態 $.formValidator.reloadAutoTip 重新定位自動構建的提示層 | |||
