ExtJS:自訂欄位驗證(vtype)

ExtJS內建的vtype有email、url、alpha、apphanum，不過內建的vtype可能不合使用，例如密碼驗證、數字輸入、IP輸入、電話輸入等，所以ExtJS提供了自訂vtype的空間。 



定義自己的vtype命名規則如下(xxx代表vtype名稱)：
xxxVal： 輸入內容的正規表示式(regular expression，可以參考Java Regular Expression的學習筆記 [精華])。
xxxMask： 輸入遮罩
xxxText： 錯誤訊息

舉例來說，我想要限制一個欄位只能輸入數字(整數)，參考程式碼如下：

Ext.form.VTypes['vnumberVal'] = /^([1-9])*[0-9]+$/;
Ext.form.VTypes['vnumberMask'] = /[0-9]/;
Ext.form.VTypes['vnumberText'] = '請輸入正確數字';
Ext.form.VTypes['vnumber'] = function (v) {
     return Ext.form.VTypes['vnumberVal'].test(v);
}

使用範例如下：

{
   xtype      : 'textfield',
   fieldLabel : "年齡",  		
   name       : 'age',
   id       : 'age',
   vtype:'vnumber',
   emptyText: '此欄位不能空白!',                    
   allowBlank: false
}

當然你也可以用來做兩個欄位互相檢查的機制，例如密碼輸入與密碼確認，或是日期範圍的檢查 詳細可以參考 範例 原始碼
更多的vtypes可以參考這裡 More-VTypes!

2011.9.7補充:再加上小數的範例

Ext.form.VTypes['vdoubleVal'] = /^[0-9]*(\.)?([0-9])*[0-9]$/;
Ext.form.VTypes['vdoubleMask'] = /[0-9.]/;
Ext.form.VTypes['vdoubleText'] = '請輸入正確數字';
Ext.form.VTypes['vdouble'] = function (v) {
    return Ext.form.VTypes['vdoubleVal'].test(v);
}