[ ExtJS2.0 開發指南 ] CH4 : 常用表單 - 實現表單驗證

前言 : 
表單驗證是 Web 程序開發中一個非常重要的部分, 它可以防止用戶提交非法數據, 統一輸入格式與減輕服務器處理垃圾數據的壓力. 

常見數據驗證 : 
對常見驗證類型進行一下簡介, 方便選擇與使用. 
1. 空值驗證 
空值驗證主要針對是否允許輸入為空 (不輸入任何內容) 進行驗證, 在使用 ExtJS 表單組件進行開發時, 空值驗證只要配置 allowBlank 選項就可以實現. true 表示允許為空, false 表示不允許為空. 

2. 輸入類型與輸入格式驗證 
輸入類型及輸入格式是指針對用戶輸入訊息的內容和形式上的驗證, 例如在輸入年齡不允許輸入非數字, 在進行電子郵件不允許輸入格式錯誤的郵件地址等. 這類驗證使用頻繁也非常重要. 在 ExtJS 表單組件中主要透過 3 種形式提供對此類驗證支持 : 

(1) 使用特定類型表單組件
- Ext.form.NumberField 提供數字內容驗證.
- Ext.form.TimeField 提供時間內容驗證.
- Ext.form.DateField 提供日期內容驗證.

(2) 使用 regex (正則表示式) 對輸入內容進行驗證.
對於自己鍵入正則表示式而言, ExtJS 對常用的正則表示式提供更好的解決辦法, 那就是 VType.

(3) 多字段間數據驗證
當兩個字段間有關聯, 如起始時間與結束時間. 則起始時間不能大於結束時間. ExtJS 沒有直接支援這類型驗證支持, 需要程序員自己開發代碼來實現.

表單驗證 (VType) : 
Ext.form.VTypes 提供了常見類型數據驗證支持, 可以簡單進行自定義與擴展, 是 ExtJS 減化程序開發, 實現驗證邏輯複用的一個核心. 主要配置如下 : 
 
Ext.form.VTypes 除了可以供表單驗證使用外, 還提供 4 個方法進行相關數據的驗證, 下表進行說明 : 
 

範例代碼 : 

執行結果 : 
 

自定義 VType 驗證 : 
自定義驗證主要包括兩種形式, 一種是單字段的自訂驗證, 另一種是多字段間自定義驗證. 對於單字段主要透過 regex 配置項指定自定義的正則表示式進行驗證, 而多字段驗證可以透過自定義 VType 類型進行驗證支持. 接下來範例著重多字段間驗證. 
範例代碼 : 

執行結果 :