javascript - extjs vtype 不适用于 textarea

Question

好的，我有一个用于 enslish 和 sign only 的 vtype，看起来像这样:

Ext.apply(Ext.form.VTypes, {
excel: function (v) {
    return /^.*.(xls)$/.test(v);
},
excelText: 'Must be an *.xls file',
englishOnly: function (v) {
    return /^[a-z0-9,\.\~\!\@\#\$\%\^\&\*\(\)\_\+\<\>]*$/.test(v);
},
englishOnlyTest: 'Must be English letters'

});

现在我有一个看起来像这样的表单:

new Ext.FormPanel({
    id: 'add-label-form',
    url: hp,
    frame: true,
    baseParams: { actionName: 'AddLable' },
    defaultType: 'textfield',
    labelWidth: 70,
    items: [{
        id: 'tbKey',
        fieldLabel: localize.key,
        allowBlank: false,
        name: 'tbKey',
        anchor: '100%'
    }, {
        id: 'tbHebrewTran',
        fieldLabel: localize.hebrew,
        allowBlank: false,
        name: 'tbHebrewTran',
        anchor: '100%'
    }, {
        id: 'tbEnglishTran',
        fieldLabel: localize.english,
        allowBlank: false,
        name: 'tbEnglishTran',
        anchor: '100%'
    }, {
        id: 'tbDescription',
        xtype: 'textarea',
        vtype:'englishOnly',
        fieldLabel: localize.description,
        allowBlank: true,
        name: 'tbDescription',
        anchor: '100%'
    }],
    buttons: [{
        text: localize.submit,
        formBind: true,
        handler: onAddLabelSubmitClick
    }, {
        text: localize.reset,
        handler: function () {
            var f = Ext.getCmp('add-label-form').getForm();
            f.reset();
        }
    }]
})

vtype 处理程序被调用并按预期返回 false 但表单仍然有效并且屏幕上没有显示任何警报...这是为什么？

Answer 1

确保在您的 FormPanel 配置中包含 monitorValid: true。

这是来自 API 的评论，更详细地解释了配置选项:

monitorValid : Boolean

If true, the form monitors its valid state client-side and regularly fires the clientvalidation event passing that state.

When monitoring valid state, the FormPanel enables/disables any of its configured buttons which have been configured with formBind: true depending on whether the form is valid or not. Defaults to false.

有了这个设置，您应该会看到按钮已启用/禁用，并且 vtype 应用到的任何字段周围都有一个红色轮廓。

更新:

我注意到您的 englishOnly 文本变量定义为 englishOnlyTest，我认为它应该定义为 englishOnlyText(您拼写为“测试”而不是“文本”)。如果我没记错的话，框架希望看到 text 附加到要用于返回文本的字符串。这可能就是您看不到任何红色轮廓或弹出文本的原因。