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

我嘲笑了一个例子，说明我如何在Ext JS 5.1中使用组合框进行此操作...它可以轻松移植到Ext 4代码中，您只需要使用{ {1}}而不是ViewController的initComponent。这是代码（和Fiddle）：

init

Answer 3

字段定义：

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

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

下一个在initComponent中（如果你更喜欢，则是监听器）：

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）将破坏验证

Answer 4

要验证链接字段，我通常创建函数（我将其添加到我的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，有时间跨度选择。

Answer 5

通常-我建议在需要交叉验证的所有字段上连接变更事件侦听器。在变更事件处理程序中，我们需要在需要通过修改的字段进行验证的所有其他字段上触发验证。当您拥有表单并且有很多字段并且需要完成很多验证时，这种方法非常有效。

ExtJs依赖字段验证

5 个答案: