ExtJs4 表格輸入時的有效性驗證

 

看到網上沒有類似的demo 官方api又寫的不太明確 , 就寫瞭一個簡單的例子分享一下 , 希望高手指點 幫忙改進~

 

一: 所需配置
1. Grid是單元格編輯模式

[javascript]
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', { 
    id : "fxxxCellEditing", 
    clicksToEdit: 2//雙擊編輯  
}); 

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
 id : "fxxxCellEditing",
 clicksToEdit: 2//雙擊編輯
});

[javascript]
selType: 'cellmodel', 

selType: 'cellmodel',
2. QuickTips用於懸浮顯示錯誤信息
[javascript]
Ext.QuickTips.init();//錯誤懸浮提示 

Ext.QuickTips.init();//錯誤懸浮提示3. Grid的每一個columns聲明一個editor

[javascript]
columns: [ 
                    { 
                        header: '<font color="red">*</font>功能', 
                        dataIndex: 'funName', 
                        width: "10%", 
                        align: 'center', 
                        sortable: true,//是否可排序  
                        editor:new Ext.form.TextField({ 
                                  allowBlank: false, 
                                  blankText   : "功能不能為空",        
                                  maxLength: 40, 
                                  maxLengthText : "長度不能超過40" 
                                  
                        }) 
                    }, 

columns: [
              {
                   header: '<font color="red">*</font>功能',
               dataIndex: 'funName',
                  width: "10%",
                  align: 'center',
                  sortable: true,//是否可排序
                  editor:new Ext.form.TextField({
                      allowBlank: false,
                   blankText   : "功能不能為空",      
                   maxLength: 40,
                   maxLengthText : "長度不能超過40"
                 
                  })
              },
這個editor用Ext.form.TextField對象實現 ,

這樣就可以在傳參中寫入驗證的配置信息瞭.

 

 

 

二: 驗證方式
1. 系統提供長度驗證
這個長度是英文長度, 中文的話可以用後邊的validator來數漢字的長度

[javascript]
editor:new Ext.form.TextField({ 
        allowBlank: false, 
          blankText   : "功能不能為空",        
          maxLength: 4, 
          maxLengthText : "長度不能超過4" 
          minLength:2, 
          minLengthText : "長度不能小於2", 

              editor:new Ext.form.TextField({
                      allowBlank: false,
                   blankText   : "功能不能為空",      
                   maxLength: 4,
                   maxLengthText : "長度不能超過4"
                   minLength:2,
                   minLengthText : "長度不能小於2",

2.正則表達式驗證

[javascript]
          editor:new Ext.form.TextField({ 
            allowBlank: false,   
blankText : "故障模式頻數比不能為空", 
regex :/^(0([\.]\d*[0-9]+)|0|1)$/, //==>此正則是[0,1] , 另"/0\.[0-9]*[1-9]$/"是(0,1)  
            regexText  : "隻能輸入:數值范圍在0到1之間的小數" 
           }) 

                  editor:new Ext.form.TextField({
                   allowBlank: false, 
       blankText : "故障模式頻數比不能為空",
       regex :/^(0([\.]\d*[0-9]+)|0|1)$/, //==>此正則是[0,1] , 另"/0\.[0-9]*[1-9]$/"是(0,1)
          regexText  : "隻能輸入:數值范圍在0到1之間的小數"
                  })

3.form.TextField的 validator :配置驗證

[javascript]
      editor:new Ext.form.TextField({ 
            allowBlank: false, 
              blankText   : "功能不能為空",        
              validator : function( value )  
              {   
                    var len = value.replace(/[^\x00-\xff]/g, "xx").length;   
      if( len > 4000 ) 
      {   
           return '功能的長度不能超過4000字節,一個漢字字符為兩個字節';   
      }   
      else 
      { 
             return true;  
      }  

        }) 

                  editor:new Ext.form.TextField({
                      allowBlank: false,
                   blankText   : "功能不能為空",      
                   validator : function( value )
                   { 
                     var len = value.replace(/[^\x00-\xff]/g, "xx").length; 
                if( len > 4000 )
                { 
                     return '功能的長度不能超過4000字節,一個漢字字符為兩個字節'; 
                } 
                else
                {
                  return true;
                }
          }
                  })

4.vtype自定義驗證
這個相對復雜 ,我隻用validator 就能完成驗證瞭 時間比較緊就沒研究 嘿嘿

大致用法如下

[javascript]
vtype       : "email",//email格式驗證    
        vtypeText   : "不是有效的郵箱地址",//錯誤提示信息 

vtype       : "email",//email格式驗證 
        vtypeText   : "不是有效的郵箱地址",//錯誤提示信息
官方給瞭幾個vtype

還可以通過

Ext.apply(Ext.form.field.VTypes, {
自己拓展

 

You May Also Like