依赖于ExtJ的字段验证

drnojrws  于 2022-09-26  发布在  其他
关注(0)|答案(6)|浏览(204)

如何验证一个依赖于另一个字段的字段?

{
  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
}
mmvthczy

mmvthczy1#

通过添加您自己的自定义验证器,并在其中执行验证。

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

tquggr8v2#

字段定义:

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

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

initComponent中的next(或侦听器,如果您愿意):

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()方法不会导致Field的validate方法返回false。因此,只将Field标记为无效不会阻止提交使用Ext.form.Action.Submit.clientValidation选项集提交的表单。”
因此,allowBlank和setValue(null)组合将破坏验证

hc8w905p

hc8w905p3#

我用Ext JS 5.1中的combobox模拟了一个例子…它很容易移植到Ext 4代码中,您只需使用initComponent而不是ViewController的e1d1e。这是代码(和提琴):

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

tp5buhyn4#

为了验证链接字段,我通常创建一个函数(我将其添加到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;
        }
    }
}

这里有一个时间间隔选择的例子。

vshtjzan

vshtjzan5#

一般来说,我建议在需要交叉验证的所有字段上连接更改事件侦听器。在变更事件处理程序中,我们需要在需要验证的其他字段上触发验证,以修改该字段。当您有一个表单,并且有很多字段,需要进行很多验证时,这种方法非常有效。

hgqdbh6s

hgqdbh6s6#

{
        xtype: 'textfield',
        fieldLabel: 'National Tax Number / ID',
        labelWidth: 200,
        maxLength: 20,
        validator: function (enteredValue) {
            if (this.hasFocus === true) {
                return true;
            }
            if (Ext.isEmpty(enteredValue)) {
                return this.allowBlank ? true : VSpace.utils.i18n.localize('submission.main.step.account.fieldRequired.message', 'This field is required.');
            }
            if(!RegExp('[^a-zA-Z0-9]').test( enteredValue )) {
                return VSpace.utils.i18n.localize('submission.main.step.account.fieldRequired.message', 'This field is required.');;
            }
            return true;
        },
        bind: {
            value: '{step.account.account.vatCode}'
        }

    }

相关问题