使用按钮 extjs 验证电子邮件文本字段

Question

我有一个文本字段，它使用电子邮件作为其值

vtype : 'email'

我正在尝试使用按钮验证此文本字段，单击该按钮时，它应该提醒我该文本字段是否有电子邮件输入。根据我的代码，无论输入如何，验证总是给我 false。我该怎么做？这是我的代码：

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'textfield',
        id: 'emailField',
        fieldLabel: 'EmailAddress',
        vtype: 'email',
        allowBlank: false,
        validator: function (val) {
            var fieldValidation = Ext.form.field.VTypes.email(val);
            if (fieldValidation === true) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        },

    }, {
        xtype: 'button',
        text: 'select',
        handler: function () {
            alert(Ext.getCmp('emailField').isValid());
        }
    }]
});

P.S：我知道问题在于我在文本字段中使用的validator: function (val)。但我需要它来根据输入更改文本字段的颜色。有没有其他方法可以做到这一点？

编辑：

我通过将validator : function 更改为change : function 使其工作

listeners: {
        'change': function (thisField) {

            if (thisField.isValid()) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        }
    }

Answer 1

经过进一步调查，您的自定义验证器会破坏默认 vtype:'email' 的验证。移除验证器功能，验证将正常工作。

如果您只想根据验证的输入更改文本字段的颜色，您需要做的就是覆盖每次文本字段时添加的 css 类 (.x-form-invalid-field-default)无效的。

希望对你有帮助。

Answer 2

我通过将validator : function 更改为change : function 使其工作

listeners: {
        'change': function (thisField) {

            if (thisField.isValid()) {
                this.setFieldStyle("background-color : #BCF5A9");
            } else {
                this.setFieldStyle("background-color : #F6CECE");
            }
        }
    }