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

我有一个文本字段，它使用

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

注：我知道问题出在我在文本字段中使用的

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

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

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

---

进一步调查后，您的自定义验证器将破坏默认vtype:“电子邮件”的验证。删除验证程序功能，验证将正常工作

如果您只想根据已验证的输入更改textfield的颜色，则只需重写css类（.x-form-invalid-field-default），该类在每次textfield无效时添加

---

希望能有所帮助。

进一步调查后，您的自定义验证器会将默认vtype:“电子邮件”的验证搞乱。删除验证程序功能，验证将正常工作

如果您只想根据已验证的输入更改textfield的颜色，则只需重写css类（.x-form-invalid-field-default），该类在每次textfield无效时添加

---

希望有帮助。

我通过将

验证器：函数

更改为

更改：函数

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

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

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

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

---

我通过将

validator:function

更改为

change:function

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

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

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

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

---

只有当我用小提琴实现我的代码时，主题才是一个问题。。当我在我真正的程序中这样做的时候就不会了是的。非常感谢。我理解这种做法。但是我不应该用css来做这个。这是最头痛的事了。顺便说一句，谢谢你。。我通过将验证器更改为ChangeTheme来实现它。只有当我用fiddle实现我的代码时，主题才是一个问题。。当我在我真正的程序中这样做的时候就不会了是的。非常感谢。我理解这种做法。但是我不应该用css来做这个。这是最头痛的事了。顺便说一句，谢谢你。。我通过将验证器更改为