【連載】研究EasyUI系統—ValidateBox元件

　　validatebox元件是所有可驗證元件的“父類”，依賴它的元件包括textbox等，而它依賴于tooltip元件。validatebox最大的作用在于它具有驗證使用者輸入的能力，它能讓開發者省去很多使用者輸入校對的工作，更專心于業務邏輯的開發。

　　

validatebox的html構造形式如下：

validatebox的js構造形式如下：

<input id="vbox" />
<script>
    $("#vbox").validatebox({
        required: true,
        validType: 'email',
        missingMessage: '内容不能為空',
        invalidMessage: '内容無效',
        onValidate:function(v) {
            if(v) {
                alert("驗證通過");
            }
        }
    });
</script>
           

　　validatebox以

<input>

标簽為基礎，html和js形式的validatebox均構造了一個驗證email格式的輸入框，效果如下：

　　上例代碼構造了validatebox的一些屬性和它的驗證事件。

　　reqiured屬性表明是否為“必需”項。

　　validType表明驗證的類型，此處“email”表明是否為電子郵件的格式。

　　missingMessage顯示了元件内容為空時的提示資訊。

　　invalidMessage表示輸入的内容不符合validType指定的類型時所提示的資訊，本例中如果使用者輸入的内容不是有效的email位址，将提示“内容無效”。

　　

validatebox屬性：

屬性名稱	屬性值類型	屬性預設值	描述
required	布爾值	false	是否必須驗證。
validType	字元串，數組	null	驗證類型。
delay	數值	200	輸入完成直至驗證的中間時間間隔。
missingMessage	字元串	“This field is required.”	元件内容為空時的提示資訊。
invalidMessage	字元串	null	元件内容無效時的提示資訊。
tipPosition	字元串	“right”	提示資訊在元件中所處的位置。 有“right”和“left”兩種位置。
deltaX	數值	提示資訊距離元件的水準偏移位置。
novalidate	布爾值	false	元件是否開啟驗證功能。

　　missingMessage表示當元件輸入的内容為空時所提示的資訊，預設是”This field is required”，顯示這串英文字元串的前提條件是使用者沒有導入中文語言包，如果導入

easyui/locale/easyui-lang-zh_CN.js

中文語言包，則會變成中文提示資訊“該輸入項為必輸項”。

　　invalidMessage用法及前提條件和missingMessage類似，當元件輸入的内容不符合要求時将提示資訊。導入了中文語言包後，如果輸入的内容不是有效的電子郵件位址，便會提示“請輸入有效的電子郵件位址”。

　　validType屬性可是重頭戲。validType的作用是指定元件驗證的類型，如果validType為”email”，那麼所有輸入的内容不符合電子郵件格式的，将會報錯。

　　easyui架構内，validType屬性已經實作了”email”、”url”、”length:[x,y]”、”remote:[url,p]”四個類型。

　　email代表電子郵件。

　　url代表超連結。

　　length:[x,y]表示允許x和y長度之間的字元（如length:[10,50]）。

　　remote:[url,p]表示向遠端位址發送ajax請求來進行驗證，url表示遠端位址，p表示向url發送請求時所攜帶的參數，傳回true表示成功。如remote:[‘test/test.php’,’address’]，則向test/test.php發送請求，并攜帶名為address的參數，該參數的值就是元件輸入的内容。

　　validType屬性在使用文法上也根據類型不同而不同，目前有三種形式。

　　第一種是單獨的字元串形式，也是最簡單的一種，上例代碼中便是這種形式。

　　第二種是鍵值對形式，請看以下代碼：

$("#vbox").validatebox({
    validType:['url', 'length[3,50]']
});
           

　　代碼展示了鍵值對的用法，文法上與第一種有差別。它表示使用url的驗證規則，并且url的長度在3到50個字元之間。

　　第三種是多個數組的形式，這種形式最靈活，能比對多個規則。

$("#vbox").validatebox({
    validType:{
        length[,],
        remote:['test/test.php','address']
    }
});
           

　　第三種文法與第一和第二種又有差別。這種驗證方式由包含多個驗證規則的數組組成，它的含義為輸入内容的長度必須在3至50個字元之間，并送出給test/test.php驗證，送出時攜帶名為address的參數。

　　關于驗證方式，還可以有其他更進階的自定義方法，會另設一文講述。

　　

validatebox方法：

方法名稱	參數	描述
options	無	傳回所有屬性。
destroy	無	銷毀元件。
validate	無	對元件内容進行驗證。
isValid	無	調用validate方法并傳回類型為布爾值的驗證結果。
enableValidation	無	開啟驗證模式。1.3.4及以上版本支援。
disableValidation	無	關閉驗證模式。1.3.4及以上版本支援。

　　validate方法用于驗證元件的内容，在驗證不通過的情況下，傳回元件的資訊，傳回值是元件的對象。

　　isValid方法也用于驗證元件的内容，它先調用validate方法，繼而傳回布爾值，表示驗證是否通過。

　　enableValidation和disableValidation方法分别表示開啟和關閉驗證模式。

　　

validatebox事件：

事件名稱	參數	描述
onBeforeValidate	無	驗證前觸發。1.4及以上版本支援。
onValidate	valid	驗證時觸發。1.4及以上版本支援。。

　　onBeforeValidate事件在驗證前觸發。

　　onValidate事件在驗證時觸發，參數valid是布爾值，表示驗證是否通過。使用者在validatebox元件中每輸入一個字元，都會觸發本事件，并傳遞valid參數。以輸入類型為email作為例子，使用者每輸入一個字元，valid參數均為false，表示不符合驗證規則，直至使用者輸完符合email規則的最後一個字元，valid參數為true，表示驗證通過。