ExtJs從屬字段驗證

Question

如何驗證依賴於另一個字段的一個字段？

{ 
    xtype:   'textfield', 
    name:   'name2', 
    vtype:   'type',  // how to write the validation code for this if it 
           // depends on the value of another field? 
    allowBlank:  false 
} 

Answer 1

通過添加您自己的自定義驗證程序並在其中執行驗證。

var field_one = new Ext.form.TextField({ 
    name: 'field_one', 
    fieldLabel: 'Field one' 
}); 

var field_two = new Ext.form.TextField({ 
    name: 'field_two', 
    fieldLabel: 'Field two', 
    validator: function(value){ 
     if(field_one.getValue() != value) { 
      return 'Error! Value not identical to field one'; 
     } else { 
      return true; 
     } 
    } 
}); 

Answer 2

字段定義：

.... 
monitorValid:  true, 
.... 
}, { 
    xtype:   'textfield', 
    name:   'name1', 
    ref:   'name1', 

}, { 
    xtype:   'textfield', 
    name:   'name2', 
    ref:   'name2', 
    allowBlank:  false, 
.... 

下一個在initComponent（或監聽器，如果你preffer）：

this.name2.on ('change', this._validate_name2, this); 

，並在FormPanel中定義的處理程序：

this._validate_name2: function () { 
    if (this.name1.getValue() == this.name2.getValue()) { 
     this.name2.markInvalid ('field does not match name1'); 
     this.name2.setValue (null); 
    } 
} 

「markInvalid （）方法不會導致如果該值通過了驗證，則該字段的驗證方法返回false。所以，簡單的標記字段爲無效不會阻止提交與Ext.form.Action.Submit.clientValidation選項組提交的表單。」

爲此組合allowBlank和setValue方法（空）將打破驗證

Answer 3

我嘲笑了我在Ext JS 5.1中如何使用組合框執行此操作的示例...它可以方便地移植到Ext 4代碼中，您只需使用initComponent而不是ViewController的init。以下代碼（和Fiddle ）：

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
    Ext.define('MyComboViewController', { 
     extend: 'Ext.app.ViewController', 
     alias: 'controller.mycombo', 
     init: function() { 
     this.getView().setStore(this.createStore()); 
     }, 
     createStore: function() { 
     var store = Ext.create('Ext.data.Store', { 
      fields: [ 
      {name: 'disp', type: 'string'}, 
      {name: 'val', type: 'int'} 
      ], 
      data: [ 
      {disp: 'One', val: 1}, 
      {disp: 'Two', val: 2}, 
      {disp: 'Three', val: 3}, 
      {disp: 'Four', val: 4}, 
      {disp: 'Five', val: 5} 
      ], 
      proxy: { 
      type: 'memory' 
      } 
     }); 
     return store; 
     } 
    }); 

    Ext.define('MyCombo', { 
     extend: 'Ext.form.field.ComboBox', 
     xtype: 'myCombo', 
     controller: 'mycombo', 
     displayField: 'disp', 
     valueField: 'val', 
     labelAlign: 'top', 
     validateOnChange: false, 
     typeAhead: true, 
     queryMode: 'local' 
    }); 

    Ext.define('MyCombosContainerViewController', { 
     extend: 'Ext.app.ViewController', 
     alias: 'controller.mycomboscontainer', 
     init: function() { 
     var startCombo = this.lookupReference('startCombo'); 
     var endCombo = this.lookupReference('endCombo'); 
     startCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]); 
     endCombo.validator = Ext.bind(this.comboValidator, this, [startCombo, endCombo]); 
     }, 
     comboValidator: function(startCombo, endCombo) { 
     return startCombo.getValue() < endCombo.getValue(); 
     }, 
     onSelectComboBox: function(combo) { 
     var startCombo = this.lookupReference('startCombo'); 
     var endCombo = this.lookupReference('endCombo'); 
     startCombo.validate(); 
     endCombo.validate(); 
     } 
    }); 

    Ext.define('MyCombosContainer', { 
     extend: 'Ext.form.FieldContainer', 
     controller: 'mycomboscontainer', 
     layout: { 
     type: 'hbox', 
     align: 'stretch' 
     }, 
     items: [{ 
     xtype: 'myCombo', 
     reference: 'startCombo', 
     fieldLabel: 'Start', 
     listeners: { 
      select: 'onSelectComboBox' 
     } 
     }, { 
     xtype: 'myCombo', 
     reference: 'endCombo', 
     fieldLabel: 'End', 
     listeners: { 
      select: 'onSelectComboBox' 
     } 
     }] 
    }); 

    Ext.create('MyCombosContainer', { 
     renderTo: Ext.getBody() 
    }); 
    } 
}); 

Answer 4

驗證鏈接的字段I usua lly創建函數（我將它添加到我的Ext.lib.Validators類中，這樣我就可以在整個應用程序中調用它），它返回一個帶有預配置作用域和驗證邏輯的匿名函數（這樣我就可以在整個應用程序中多次使用它）。

下面是一個例子：

myValidator: function (firstFieldSelector, secondFieldSelector, thirdFieldSelector) { 
    return function() { 
     var firstField = Ext.ComponentQuery.query(firstFieldSelector)[0], 
      secondField= Ext.ComponentQuery.query(secondFieldSelector)[0], 
      thirdField= Ext.ComponentQuery.query(thirdFieldSelector)[0]; 

     if (firstField && secondField && thirdField) { 
      // Validation logic here... 
      if(true) { 
       return true; 
      } else { 
       return 'Error text here...'; 
      } 
     } else { 
      // Validator incorrectly configured, do not validate with it 
      return true; 
     } 
    } 
} 

這裏是一個example fiddle有時間跨度的選擇。