關於ext-js 中的自訂校正

項目中遇到了前端校正，我們採用的是用vType來建立可以複用的校正器：

需求：校正IPv32

為了建立可以複用的校正器，我們使用了Vtype，定義如下：

 

  
// Custom Vtype for ip address 
  
Ext.apply(Ext.form.field.VTypes, { 
  
    ip : function(v) { 
  
        var reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/; 
  
        return reg.test(v); 
  
    }, 
  
    ipText : 'must be numeric, dot -  IP adress format', 
  
    ipMask : /[0-9\.]/i 
  
}); 
 

從這段代碼可以看出來：

第3行冒號左邊的ip表示這個校正器的名字，而右邊是一個函數來定義了校正規則， 其中參數v表示被校正的內容。

第4行定義了一個Regex，它匹配一個V32的ip地址，我們的校正規則就是讓待測的值是否匹配這個Regex。

第7行是這個校正出錯的提示文本，它會在頁面上用紅色框子顯示出來，對應的樣式是x-form-invalid-field.

第8行的Regex自動會傳遞給ext-js的TextField控制項，從而在keyPress事件觸發時候自動調用從而來限制輸入的字元。

 

為了說明這個校正器如何工作的，我們看下應用代碼：

 

  
initComponent : function() { 
  
        this.items = [{ 
  
            xtype : 'displayfield', 
  
            value : this.sTitle, 
  
            fieldStyle : 'font-weight:bold;' 
  
        },  
  
 
  
… 
  
 
  
          { 
  
            fieldLabel : 'IP address', 
  
            name : 'nodeIp', 
  
            vtype:'ip', 
  
            maxLength : 60 
  
        }]; 
  
        this.callParent(arguments); 
  
    }, 
  
}); 
 

從第13行，可以看出，這裡我們對於'IP addres"使用了ip的欄位校正器,所以它可以正確的進列欄位校正，如果校正結果出錯，則會飄紅：

650) this.width=650;" border="0" alt="" src="http://www.bkjia.com/uploads/allimg/131228/1143531B0-0.png" />

 

 

 

 

 

本文出自 “平行線的凝聚” 部落格，請務必保留此出處http://supercharles888.blog.51cto.com/609344/1191077