[返回目錄](index.html)#### [第三方手冊](shouce_index.html "test") —— [jQuery formValidator手冊](formvalidator.html "test") PHPCMS V9中使用的表單驗證框架為jQuery formValidator 項目地址：[請點擊這里](http://www.cnblogs.com/wzmaodong/archive/2011/07/15/2106947.html) ##### 什么是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? ``` <pre class="brush:xml"> ``` ##### jQuery formValidator插件的API幫助 目前支持5種大的校驗方式，分別是：inputValidator（針對input、textarea、select控件的字符長度、值范圍、選擇個數的控制）、compareValidator（提供2個對象的比較，目前可以比較字符串和數值型）、ajaxValidator（通過ajax到服務器上做數據校驗）、regexValidator（提供可擴展的正則表達式庫） 、functionValidator （提供可擴展函數庫來做校驗） 每種格式支持的控件類型如下： inputtextareaselect校驗方式textradiocheckboxfilepasswordtextareaselect-oneinputValidator√√√√√√√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""要跟源目標進行比較的目標IDoperateor比較符號"="一共有如下幾種類型:=、!=、>、>=、<、<=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、jsondata數據"" async是否以異步的方式發送true success當請求成功時調用的函數null processdata自動處理返回的數據為字符串true在默認的情況下，如果data選項傳進的數據是一個對象而不是字符串，將會自動地被處理和轉換成一個查詢字符串complete當請求完成時調用的函數null beforesend當請求前時調用的函數null有個一個參數，根$.ajax里的beforeSend參數一樣。buttons你點提交的按鈕(組)jQuery對象null當你觸發了ajax校驗，buttons里對應的按鈕（組）就會灰掉，一直等待服務器返回數據為止error當請求失敗時調用的函數"請求失敗"你可以自己定義這個錯誤，在error里自動打出。為空者不顯示。functionValidator 屬性屬性名稱默認值返回值的解釋fun 外部函數名() 參數1:元素的值, 參數2:元素對象默認當作處理過程 true/false校驗成功/失敗字符串校驗失敗，返回值當作自定義錯誤無處理過程onerror發生錯誤的提示"輸入錯誤"函數return false的時候，顯示該錯誤信息公共函數:主要是設置全局參數和判斷是否通過校驗 函數名函數說明$.formValidator.initConfig參數：配置類型 屬性默認值說明validatorgroup"1"你要針對哪個組進行配置formid""要自動注冊pageIsValid函數的表單ID號alertmessagefalse是否彈出窗口autotipfalse是否自動構建提示層errorfocustrue發生錯誤的時候，第一個出錯控件是否獲得焦點forcevalidtrue是否一直輸入正確為止才允許離開焦點widewordtrue是否把一個全角字符當做2個長度onsuccessnull該組校驗通過后的回調函數,返回false，阻止表單的提交submitoncefalse校驗通過后，是否灰掉所有的提交按鈕onerrornull該組校驗失敗后的回調函數， 有兩個參數 參數1一個校驗沒有通過的錯誤信息參數2一個校驗沒有通過的元素對象debugfalse是否處于調試模式。true:不提交表單$.formValidator.pageIsValid 一個參數： 不是配置類型 validatorgroup"1"你要針對哪個組進行驗證$.formValidator.isOneValid一個參數： 當時設置驗證的表單元素ID。 返回是否校驗成功的信息。 $.formValidator.setFailStatefunction("tipid","顯示的信息") 在showword模式下，如果你的額外校驗沒有通過，你可以通過它來設置成失敗信息和狀態 $.formValidator.getLengthfunction("表單元素id") checkbox或radiobutton表示(同組)選擇的個數。 對select-one，選擇索引的值 對select-multiple，inputValidator里的參數min和max表示選擇的個數 其它input表示的表示字符長度。 $.formValidator.retSetTipStatefunction(校驗組號) 來把該組的提示內容恢復到onshow狀態 [返回目錄](index.html) 上海盛大網絡發展有限公司 c 2006 - 2011 B2-20040053. 問題和建議請反饋至：http://bbs.phpcms.cn