如何在ExtJS6中创建警告表单字段验证程序？

我正在尝试制作一个“警告字段验证器”，它的行为类似于常规字段验证器，但不会使表单无效，只是在字段旁边显示一个带有工具提示的警告图标

---

我应该重写哪些方法？我可能只需要在字段旁边打一个带有图标的div，但有什么好方法可以像普通验证器一样方便地使用呢？

我会像这样扩展

Ext.form.Basic

：

Ext.define('MyApp.form.Basic',{
    extend:'Ext.form.Basic',
    isValid: function() {
        var me = this,
            invalid;
        Ext.suspendLayouts();
        invalid = me.getFields().filterBy(function(field) {
            return !field.validate() && !field.mayBeInvalid;
        });
        Ext.resumeLayouts(true);
        return invalid.length < 1;
    }
});
Ext.define('MyApp.form.Panel',{
    extend:'Ext.form.Panel',
    xtype:'myformpanel',
    createForm: function() {
        var cfg = {},
            props = this.basicFormConfigs,
            len = props.length,
            i = 0,
            prop;

        for (; i < len; ++i) {
            prop = props[i];
            cfg[prop] = this[prop];
        }
        return new MyApp.form.Basic(this, cfg);
    }
});

xtype:'myformpanel',
items:[{
     xtype:'textfield',
     // this field should be validated.
},{
     xtype:'textfield',
     mayBeInvalid:true // our own extension property
     // this field should not block the form submission
}]

然后你照常提交

完全未经测试，但我想你会为我这么做：）

另一种方法是，如果您确实只需要一个表单和一个

submit（）

调用，则在提交之前手动执行相同的操作：

var invalidFields = formpanel.getForm().getFields().filterBy(function(field) {
    return !field.validate() && !field.mayBeInvalid;
});
if(invalidFields.length < 1) form.submit({
    clientValidation: false, // do not validate anymore
    ...
})

var invalidFields=formpanel.getForm（）.getFields（）.filterBy（函数（字段））{
return！field.validate（）&&！field.mayBeInvalid；
});
如果（invalidFields.length<1）表格提交({
clientValidation:false，//不再验证
...
})

我将扩展

Ext.form.Basic

如下：

Ext.define('MyApp.form.Basic',{
    extend:'Ext.form.Basic',
    isValid: function() {
        var me = this,
            invalid;
        Ext.suspendLayouts();
        invalid = me.getFields().filterBy(function(field) {
            return !field.validate() && !field.mayBeInvalid;
        });
        Ext.resumeLayouts(true);
        return invalid.length < 1;
    }
});
Ext.define('MyApp.form.Panel',{
    extend:'Ext.form.Panel',
    xtype:'myformpanel',
    createForm: function() {
        var cfg = {},
            props = this.basicFormConfigs,
            len = props.length,
            i = 0,
            prop;

        for (; i < len; ++i) {
            prop = props[i];
            cfg[prop] = this[prop];
        }
        return new MyApp.form.Basic(this, cfg);
    }
});

xtype:'myformpanel',
items:[{
     xtype:'textfield',
     // this field should be validated.
},{
     xtype:'textfield',
     mayBeInvalid:true // our own extension property
     // this field should not block the form submission
}]

然后你照常提交

完全未经测试，但我想你会为我这么做：）

另一种方法是，如果您确实只需要一个表单和一个

submit（）

调用，则在提交之前手动执行相同的操作：

var invalidFields = formpanel.getForm().getFields().filterBy(function(field) {
    return !field.validate() && !field.mayBeInvalid;
});
if(invalidFields.length < 1) form.submit({
    clientValidation: false, // do not validate anymore
    ...
})

var invalidFields=formpanel.getForm（）.getFields（）.filterBy（函数（字段））{
return！field.validate（）&&！field.mayBeInvalid；
});
如果（invalidFields.length<1）表格提交({
clientValidation:false，//不再验证
...
})

亚历山大给出了一个很好的例子来实现这一点。根据你的回答，我对一些基本的东西做了修改，你可以直接在文本字段中实现某种软警告：

Ext.define（'Ext.form.field.MyText'{
扩展：'Ext.form.field.Text'，
听众：{
模糊：函数（）{
if（this.softWarning&&this.softWarning==true）{
这个.softValidate（）；
}
}
},
softValidate:function（）{
var el=this.inputEl；
如果（el）{
if（this.getValue（）.length<5）{
el.dom.style.backgroundColor='红色'；
el.dom.style.color='白色'；
}否则{
el.dom.style.backgroundColor=''；
el.dom.style.color=''；
}
}
}
});

---

请注意，这是一种可能的方法。我建议结合这两种答案来满足您的需求。

亚历山大给出了一个很好的例子来实现这一点。根据你的回答，我对一些基本的东西做了修改，你可以直接在文本字段中实现某种软警告：

Ext.define（'Ext.form.field.MyText'{
扩展：'Ext.form.field.Text'，
听众：{
模糊：函数（）{
if（this.softWarning&&this.softWarning==true）{
这个.softValidate（）；
}
}
},
softValidate:function（）{
var el=this.inputEl；
如果（el）{
if（this.getValue（）.length<5）{
el.dom.style.backgroundColor='红色'；
el.dom.style.color='白色'；
}否则{
el.dom.style.backgroundColor=''；
el.dom.style.color=''；
}
}
}
});

---

请注意，这是一种可能的方法。我建议根据您的需要结合使用这两种答案。

我们可以通过覆盖Ext.form.field.Base的validateValue来实现这一点

Ext.define('MyApp.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    validateValue: function(value) {
        // let validations run as usual.
        var isValid = this.callParent(arguments);

        // warnings related code begin here
        // once the field is valid, then we check for warnings
        if(isValid) {
            var warnings = me.getWarnings(),
                hasWarnings = Ext.isEmpty(warnings);
            if(hasWarnings) {
               me.showWarnings(warnings);
            }
            else {
               me.clearWarnings();
            } 
        }

        return isValid;
    },

    getWarnings: function(value) {
        // do all validations related to warnings.
        // infact we can use the existing vtypes for doing this.
        // i just altered this to support two types of configurations
        // wtype or warnator (Function to Warnate)

        value = arguments.length ? (value == null ? '' : value) : this.processRawValue(this.getRawValue());

        var me = this,
            warnings = [],
            warnator = me.warnator,  // yeah sounds funnny right :D
            wtype = me.wtype,
            vtypes = Ext.form.field.VTypes

        if (Ext.isFunction(warnator)) {
            msg = warnator.call(me, value);
            if (msg !== true) {
                warnings.push(msg);
            }
        }

        if (wtype) {
            if (!vtypes[wtype](value, me)) {
                warnings.push(me.wtypeText || vtypes[wtype +'Text']);
            }
        }

        return warnings;
    },

    showWarnings: functions(warnings) {
        // show the warnings (similar to markInvalid function)
        this.setActiveWarnings(Ext.Array.from(warnings));
    },

    clearWarnings: function() {
       // clear the warnings (similar to clearInvalid function)
       this.unsetActiveWarning();
    }
}

并覆盖标签以显示警告

Ext.define('MyApp.overrides.form.Labelable', {
    override: 'Ext.form.Labelable',

    setActiveWarnings: function(warnings) {
        // similar to setActiveErrors
    },

    unsetActiveWarning: function() {
        // similar to unsetActiveError
    }
});

还有一些其他用例需要处理，比如启用和禁用字段，您可能需要根据您的需求覆盖onEnable和onDisable

更新

这是显示警告的小提琴。 验证：姓氏是必需的。 警告：姓氏必须至少包含3个字符

---

我们可以通过覆盖Ext.form.field.Base的validateValue来实现这一点

Ext.define('MyApp.overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    validateValue: function(value) {
        // let validations run as usual.
        var isValid = this.callParent(arguments);

        // warnings related code begin here
        // once the field is valid, then we check for warnings
        if(isValid) {
            var warnings = me.getWarnings(),
                hasWarnings = Ext.isEmpty(warnings);
            if(hasWarnings) {
               me.showWarnings(warnings);
            }
            else {
               me.clearWarnings();
            } 
        }

        return isValid;
    },

    getWarnings: function(value) {
        // do all validations related to warnings.
        // infact we can use the existing vtypes for doing this.
        // i just altered this to support two types of configurations
        // wtype or warnator (Function to Warnate)

        value = arguments.length ? (value == null ? '' : value) : this.processRawValue(this.getRawValue());

        var me = this,
            warnings = [],
            warnator = me.warnator,  // yeah sounds funnny right :D
            wtype = me.wtype,
            vtypes = Ext.form.field.VTypes

        if (Ext.isFunction(warnator)) {
            msg = warnator.call(me, value);
            if (msg !== true) {
                warnings.push(msg);
            }
        }

        if (wtype) {
            if (!vtypes[wtype](value, me)) {
                warnings.push(me.wtypeText || vtypes[wtype +'Text']);
            }
        }

        return warnings;
    },

    showWarnings: functions(warnings) {
        // show the warnings (similar to markInvalid function)
        this.setActiveWarnings(Ext.Array.from(warnings));
    },

    clearWarnings: function() {
       // clear the warnings (similar to clearInvalid function)
       this.unsetActiveWarning();
    }
}

并覆盖标签以显示警告

Ext.define('MyApp.overrides.form.Labelable', {
    override: 'Ext.form.Labelable',

    setActiveWarnings: function(warnings) {
        // similar to setActiveErrors
    },

    unsetActiveWarning: function() {
        // similar to unsetActiveError
    }
});

还有一些其他用例需要处理，比如启用和禁用字段，您可能需要根据您的需求覆盖onEnable和onDisable

更新

这是显示警告的小提琴。 验证：姓氏是必需的。 警告：姓氏必须至少包含3个字符

---

以一种健壮的方式覆盖有点麻烦-您最好创建一个自定义表单，使用不同的方法区分提交验证和显示验证（可以手动查找他们关心的实际目标字段）。以一种健壮的方式重写有点麻烦-您最好创建一个自定义表单，其中的方法区分提交验证和显示验证（可以手动查找他们关心的实际目标字段）。抱歉，我认为这不是我想要的。您只是想跳过“mayBeInvalid”字段的无效吗？我不是想跳过验证，而是想添加另一个“软”验证，它只显示一个带有消息的警告图标，而不会使字段无效。因此，如果必填字段为空，则它仍应使其无效，但如果字段值小于10，则它仍应有效且可提交，但在字段旁边有一个警告图标（而不是红色感叹号）。抱歉，我认为这不是我想要的。您只是想跳过“mayBeInvalid”字段的无效吗？我不是想跳过验证，而是想添加另一个“软”验证，它只显示一个带有消息的警告图标，而不会使字段无效。因此，如果必填字段为空，则仍应使其无效，但如果字段值小于10，则该字段仍应有效且可提交，但在字段旁边有一个警告图标（而不是