如何使用vee-validate 3校验自定义组件？DatePickerInput无错误提示排查

错误信息不展示的核心原因 #

vee-validate 的 validation-provider 默认仅能自动识别原生表单元素、官方内置适配的UI组件的绑定值，自定义组件场景下，你没有显式告诉它需要校验的目标值，因此不会触发校验逻辑，errors 自然始终为空。

修复步骤 #

1. 给validation-provider显式绑定待校验值
   在父组件的validation-provider标签上新增value属性，绑定你要校验的startDate变量，同时可以按需指定校验触发模式：

<validation-provider
    v-slot="{ errors }"
    :name="$t('StartDate')"
    rules="required"
    :value="startDate"
    mode="eager" <!-- 可选：值变化时立刻触发校验，默认是失焦才触发 -->
>
  <div>{{ errors }}</div>
  <DatePickerInput
      v-model="startDate"
      :label="$t('StartDate')"
      :error-messages="errors" />
</validation-provider>

2. 修复自定义组件的v-model同步逻辑（可选，避免后续边界问题）
   当前你的DatePickerInput仅在初始化时将value赋值给内部date变量，没有监听外部传入的value变化，会导致父组件主动修改startDate时组件内部值不更新的问题，需要新增对value属性的监听：

// DatePickerInput 组件的watch配置
watch: {
  // 新增对value prop的监听
  value: {
    handler(newVal) {
      this.date = newVal
    }
  },
  date: {
    handler(date) { this.handleInput(date) },
  },
}

3. 增加空值判断避免运行报错（可选）
   当前isoDate计算属性没有做空值判断，当date为空时new Date(this.date)会生成无效日期，调用toISOString会抛出异常，优化如下：

computed: {
  isoDate() {
    if (!this.date) return ''
    return new Date(this.date).toISOString().substr(0, 10)
  },
}

内容的提问来源于stack exchange，提问作者Hendrik Jan