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);
}

0 意見: