如何在ExtJS中添加带必填输入校验的MessageBox提示框

要给ExtJS的MessageBox输入框添加类似textfield组件allowblank的必填校验，你可以通过以下两种常用方式实现：

方法一：利用prompt的字段配置快速实现 #

Ext.Msg.prompt支持传入字段配置项，直接复用textfield的校验属性：

Ext.Msg.prompt('必填输入', '请输入内容（不能为空）', function(btn, text) {
    if (btn === 'ok') {
        // 仅当输入合法时执行后续逻辑
        console.log('输入内容：', text);
    }
}, this, false, '', {
    field: {
        allowBlank: false,
        blankText: '此项为必填项',
        msgTarget: 'side' // 校验提示显示位置：侧边/下方等
    }
});

这种方式会自动在用户点击「确定」时触发校验，若输入为空，会弹出blankText中的提示，且不会关闭对话框。

方法二：自定义MessageBox实现完全可控的校验 #

如果需要更灵活的布局或校验逻辑，使用Ext.Msg.show自定义表单组件：

Ext.Msg.show({
    title: '必填输入',
    msg: '请输入必填内容：',
    width: 320,
    buttons: Ext.Msg.OKCANCEL,
    icon: Ext.Msg.QUESTION,
    items: [{
        xtype: 'textfield',
        name: 'requiredContent',
        allowBlank: false,
        blankText: '不能为空，请输入内容',
        msgTarget: 'under',
        anchor: '100%'
    }],
    fn: function(btn, _, cfg) {
        if (btn === 'ok') {
            const form = cfg.msgBox.down('form');
            // 手动触发表单校验
            if (form.isValid()) {
                const inputVal = form.getValues().requiredContent;
                // 处理合法输入
                console.log('有效输入值：', inputVal);
            } else {
                // 校验不通过时阻止对话框关闭
                return false;
            }
        }
    }
});

这种方式允许你添加多个表单组件、自定义校验规则，完全掌控校验时机和提示样式。

关键说明 #

• 核心原理是复用textfield的allowBlank、blankText等校验属性，MessageBox会自动关联这些规则。
• msgTarget用于指定校验提示的显示位置，可选值包括side（侧边）、under（输入框下方）、qtip（悬浮提示）等。
• 不同ExtJS版本的API细节可能略有差异，但核心逻辑一致。

内容的提问来源于stack exchange，提问作者Aakash Singh