什么是jQuery formValidator？
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文件在PHPCMS V9中放置在哪里?
web目錄\statics\js\formvalidator.js
web目錄\statics\js\formvalidatorregex.js
如何在v9中加載jQuery formValidator?
|
1
2
|
<script language=
"javascript"
src=
"<?php echo JS_PATH?>formvalidator.js"
type=
"text/javascript"
charset=
"UTF-8"
></script>
<script language=
"javascript"
src=
"<?php echo JS_PATH?>formvalidatorregex.js"
type=
"text/javascript"
charset=
"UTF-8"
></script>
|
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 | 輸入錯誤離開焦點的時候，自動修復錯誤 | false | √ | 先給出提示然后，自動修復，目前只支持text、file、textarea三種類型 |
| onempty | 空時候的提示 | "輸入內容為空" | 可以為空，為空時候的提示。為空者不顯示 | |
| onshow | 顯示時候的提示 | "請輸入內容" | 為空者不顯示 | |
| onfocus | 獲得焦點的提示 | "請輸入內容" | 為空者不顯示 | |
| oncorrect | 輸入正確后的提示 | "輸入正確" | 當你焦點離開控件的時候，如果輸入正確將出現該提示。為空者不顯示 | |
| tipid | 顯示錯誤的容器ID | 表單ID+"Tip" | 如果不自動構建提示層，表示提示成的ID號 如果自動構建提示層，表示提示層相對的目標控件 |
|
| tipcss | 自動構建的提示層的樣式 | "left":"10px", "top":"1px", "height":"20px", "width":"250px" |
主要用於定位自動構建的提示層 | |
| forcevalid | 強制輸入的值必須有效 | true | √ | 是否把一個全角字符當做2個長度的參數 |
| defaultvalue | 默認值 | null | √ | 所有input和select表單。如果你不設置就保持原值，一旦設置就設為默認值。 |
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：代表可以進行多行匹配。 可以任意組合,當然也可以不加參數 |
| datatype | 數據類型 | "string" | "string":自己寫的表達式，"enum":枚舉名。具體請見demo3.htm 你可以自己修改、添加formValidatorRegex.js里的枚舉項目名和表達式。 |
| onerror: | 發生錯誤的提示 | "輸入錯誤" | 為空者不顯示。 |
ajaxValidator:幾乎所有的屬性跟$.ajax()的屬性一樣，請參考$.ajax()函數的幫助
| 屬性 | 屬性名稱 | 默認值 | 詳細解釋 |
| type | 請求的類型 | "GET" | "POST" 或 "GET" |
| url | 發送到的URL地址 | "" | |
| datatype | 返回的數據類型 | "html" | xml、html、script、json |
| data | 數據 | "" | |
| async | 是否以異步的方式發送 | true | |
| success | 當請求成功時調用的函數 | null | |
| processdata | 自動處理返回的數據為字符串 | true | 在默認的情況下，如果data選項傳進的數據是一個對象而不是字符串，將會自動地被處理和轉換成一個查詢字符串 |
| complete | 當請求完成時調用的函數 | null | |
| beforesend | 當請求前時調用的函數 | null | 有個一個參數，根$.ajax里的beforeSend參數一樣。 |
| buttons | 你點提交的按鈕(組)jQuery對象 | null | 當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待服務器返回數據為止 |
| error | 當請求失敗時調用的函數 | "請求失敗" | 你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。 |
functionValidator
| 屬性 | 屬性名稱 | 默認值 | 返回值的解釋 | ||||||
| fun | 外部函數名() 參數1:元素的值, 參數2:元素對象 |
默認當作處理過程 |
|
||||||
| onerror | 發生錯誤的提示 | "輸入錯誤" | 函數return false的時候，顯示該錯誤信息 |
公共函數:主要是設置全局參數和判斷是否通過校驗
| 函數名 | 函數說明 | ||||||||||||||||||||||||||||||||||||||||
| $.formValidator.initConfig | 參數：配置類型
|
||||||||||||||||||||||||||||||||||||||||
| $.formValidator.pageIsValid | 一個參數： 不是配置類型
|
||||||||||||||||||||||||||||||||||||||||
| $.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狀態 |