jQuery formValidator表單驗證插件

什麼是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:元素對象	默認看成處理過程	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 校驗經過後，是否灰掉全部的提交按鈕 onerror null 該組校驗失敗後的回調函數， 有兩個參數 參數1 一個校驗沒有經過的錯誤信息 參數2 一個校驗沒有經過的元素對象 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狀態