EXTJS 4 如何实现radio group（单选按钮组）的校验功能？

云上老周

2026-9-26

问题解答

你需要重写单选按钮组（Ext.form.RadioGroup）的getErrors校验方法，补充选中状态的检测逻辑即可实现需求。

原生RadioGroup的allowBlank: false配置默认不会触发未选中场景的校验，核心原因是默认的getErrors方法没有判断组内是否存在选中的单选按钮，因此需要手动补全该逻辑。

全局重写方案（对所有RadioGroup生效）

Ext.override(Ext.form.RadioGroup, {
    getErrors: function (value) {
        // 调用父类原有逻辑获取默认错误
        const errors = this.callParent(arguments);
        // 判断是否有选中项：无选中项时RadioGroup的getValue返回null
        const hasChecked = this.getValue() !== null;

        // 不允许为空且无选中项时追加错误提示
        if (!this.allowBlank && !hasChecked) {
            errors.push(this.blankText || '请选择一个选项');
        }
        return errors;
    }
});

单实例重写方案（仅对当前组件生效）

如果不需要全局修改，创建组件时直接自定义方法即可：

{
    xtype: 'radiogroup',
    allowBlank: false,
    blankText: '请选择对应的选项',
    items: [
        { boxLabel: '选项1', name: 'radio', inputValue: '1' },
        { boxLabel: '选项2', name: 'radio', inputValue: '2' }
    ],
    // 自定义当前实例的校验方法
    getErrors: function (value) {
        const errors = this.callParent(arguments);
        const hasChecked = this.getValue() !== null;
        if (!this.allowBlank && !hasChecked) {
            errors.push(this.blankText);
        }
        return errors;
    }
}