Vue3组合式API中Vee-validate+Zod失焦时自定义错误提示不生效

在Vue3组合式API环境下，使用Vee-Validate结合Zod实现表单校验时，配置了自定义错误提示但出现以下问题：点击输入框后立即失焦，页面显示Zod默认的"Required"提示；仅当输入内容后再删除，才会显示自定义的"Business name is required"提示。需要让系统始终显示自定义错误提示。

问题根源 #

字段初始值为undefined，当输入框失焦时，Zod会优先触发针对值不存在的required规则，而该规则使用了默认提示；只有当字段值变为空字符串（输入后删除操作）时，才会触发min(1)规则的自定义提示。

解决方案 #

有两种可行的解决方式：

• 方式一：给字段设置初始空字符串
  通过defineField的第二个参数指定初始值为空字符串，确保字段初始状态是空字符串而非undefined，这样失焦时会直接触发min(1)的自定义提示。

• 方式二：在Zod规则中明确指定required的自定义消息
  给Zod的required规则添加自定义提示，覆盖默认的"Required"，同时保留min(1)规则以处理空字符串的情况。

修改后的代码示例 #

方式一：设置初始空字符串

<template>
  <form class="m-6">
    <InputText v-model="businessName" v-bind="businessNameAttrs" />
    <div>{{ errors.businessName }}</div>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod';

const formSchema = toTypedSchema(
  z.object({
    businessName: z.string().min(1, { message: 'Business name is required' }),
  })
);

const { errors, handleSubmit, defineField } = useForm({
  validationSchema: formSchema,
});

// 指定初始值为空字符串
const [businessName, businessNameAttrs] = defineField('businessName', { initialValue: '' });
</script>

方式二：指定required自定义消息

<template>
  <form class="m-6">
    <InputText v-model="businessName" v-bind="businessNameAttrs" />
    <div>{{ errors.businessName }}</div>
  </form>
</template>

<script setup lang="ts">
import { z } from 'zod';

const formSchema = toTypedSchema(
  z.object({
    // 同时覆盖required和min(1)的错误提示
    businessName: z.string()
      .required('Business name is required')
      .min(1, 'Business name is required'),
  })
);

const { errors, handleSubmit, defineField } = useForm({
  validationSchema: formSchema,
});

const [businessName, businessNameAttrs] = defineField('businessName');
</script>

若使用Zod v3.20+版本，可使用nonempty简化min(1)的写法：

businessName: z.string()
  .required('Business name is required')
  .nonempty('Business name is required'),

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