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

Question

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

我应该覆盖哪些方法？我可能只需在字段旁边添加一个带有图标的 div，但怎样做才能像常规验证器一样方便地使用？

Answer 1

我会这样扩展 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
    ...
})

Answer 2

亚历山大举了一个很好的例子来实现这一点。根据你的回答，我用一些基本的东西做了一个fiddle，你如何可以直接向文本字段实现某种软警告：https://fiddle.sencha.com/#fiddle/16rk

Ext.define('Ext.form.field.MyText', {
    extend:'Ext.form.field.Text',
    listeners: {
        blur: function() {
            if (this.softWarning && this.softWarning == true) {
                this.softValidate();
            }
        }
    },
    softValidate: function() {
        var el = this.inputEl;
        if (el) {
            if (this.getValue().length < 5) {
                el.dom.style.backgroundColor = 'red';
                el.dom.style.color = 'white';
            } else {
                el.dom.style.backgroundColor = '';
                el.dom.style.color = '';
            }
        }

    }
});

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

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

并覆盖 Labelable 以显示警告。

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

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

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

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

更新

这是显示警告的fiddle。验证：姓氏是必填项。警告：姓氏必须至少包含 3 个字符。

https://fiddle.sencha.com/#fiddle/17da

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

How to create a warning form field validator in ExtJS6?

extjs

extjs6