VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案

一、问题描述

在使用 VBen Admin（基于 Vue3 + Ant Design 的后台管理框架）开发表单时，遇到一个非常常见的问题：

Select 选择框设置为必填项后，打开页面时默认会显示"请选择xxx"的校验提示。但当用户选择了一个选项后，校验提示依然存在，点击保存按钮也无法消失。

就像这样：

从图中可以看到：

• ✅ 用户已经选中了"机构类别"
• ❌ 但校验提示"请选择机构类别"仍然显示
• ❌ 点击保存按钮，提示依然不消失

---

二、问题原因

这是因为 VBen Admin（Ant Design Vue）的默认校验触发时机是 change（值变化时），但 Select 组件在某些场景下（特别是通过 ApiSelect 异步加载数据的场景），change 事件触发后，表单的校验状态没有及时更新，导致错误提示依然显示。

---

三、解决方案

只需在表单项配置中添加 itemProps.validateTrigger: 'blur' 即可：

{
  field: 'category',
  component: 'ApiSelect',
  label: '机构类别',
  required: true,
  defaultValue: CategoryEnum.DEPARTMENT,
  itemProps: {
    validateTrigger: 'blur',  // ✅ 关键配置
  },
  componentProps: {
    api: findCategoryOrganization,
    labelField: 'name',
    valueField: 'code',
  },
}

---

四、代码解析

itemProps vs componentProps

很多同学会混淆这两个配置，它们的作用完全不同：

配置	作用	示例
componentProps	传递给组件本身的属性	api、labelField、placeholder
itemProps	表单项的布局和校验配置	validateTrigger、colon

// ✅ 正确：校验触发时机放在 itemProps
itemProps: {
  validateTrigger: 'blur',
}

// ❌ 错误：这样放是没用的
componentProps: {
  validateTrigger: 'blur',
}

---

五、为什么改成 blur 就好了？

原来的问题

• 默认触发时机是 change
• ApiSelect 异步加载数据时，选择后值变化了，但校验状态更新有延迟
• 导致组件认为值还没变，校验提示不消失

改成 blur 后

• 当用户选择完选项后，光标离开选择框时触发校验
• 此时值已经完全确定，校验状态能够正确更新
• 提示立即消失 ✅

---

六、完整配置示例

import { findCategoryOrganization } from '@/api/system/category';

export const useCategorySelect = () => {
  return {
    field: 'category',
    component: 'ApiSelect',
    label: '机构类别',
    required: true,
    defaultValue: 'default_code',
    itemProps: {
      validateTrigger: 'blur',
    },
    componentProps: {
      api: findCategoryOrganization,
      labelField: 'name',
      valueField: 'code',
      placeholder: '请选择机构类别',
      onChange: (value) => {
        console.log('选中了:', value);
      },
    },
  };
};

---

七、其他常见表单组件的校验配置

除了 ApiSelect，其他组件如果也遇到类似问题，同样可以用 validateTrigger 解决：

1. 树形选择 TreeSelect

itemProps: {
  validateTrigger: 'blur',
},
componentProps: {
  treeData: treeData,
  placeholder: '请选择',
},

2. cascader 级联选择

itemProps: {
  validateTrigger: 'change',
},

3. DatePicker 日期选择

itemProps: {
  validateTrigger: 'blur',
},
componentProps: {
  format: 'YYYY-MM-DD',
  placeholder: '请选择日期',
},

---

八、Git 提交记录参考

该 Bug 的修复提交：

fix: ApiSelect选中仍然报未填写

修改前：validateTrigger 默认值导致异步选择后校验状态不更新
修改后：设置 validateTrigger: 'blur'，光标离开时触发校验

---

九、总结

问题	原因	解决方案
Select 选中后提示不消失	校验触发时机问题	itemProps: { validateTrigger: 'blur' }
ApiSelect 必填项默认值仍报错	默认值加载早于异步数据	确保默认值在数据加载完成后设置
其他组件类似问题	同上	同样使用 validateTrigger 配置

---

核心点记住：validateTrigger 要放在 itemProps 里，不是 componentProps！

---

📌 作者：只道寻常

💡 技巧：遇到表单校验问题，优先检查 validateTrigger 配置