Question

我正在尝试创建一个“警告字段验证程序”，其行为类似于常规字段验证程序，但不会使表单无效，只显示一个警告图标，并在字段旁边显示工具提示。

我应该采取哪些方法？我可以在一个字段旁边用一个图标拍一个div，但这样做的方法是什么，这样可以方便地用作常规验证器？

Answer 1

我们可以通过覆盖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。

<强>更新

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

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

Answer 2

亚历山大给出了一个很好的例子来实现这一目标。根据你的回答，我做了一些基本的东西，你可以直接在文本字段中实现某种软警告：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.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
    ...
})

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

3 个答案: