Vee-validate with Zod：自定义错误消息未在 Vue 3 Composition API 中的 Blur 上显示

Question

我正在尝试使用 vee-validate 与 zod 使用组合 API 和自定义错误消息。

问题是，如果我单击输入并立即单击输入之外，它将显示默认的 Zod 错误消息“必需”。如果我将文本放入输入然后将其删除，它只会显示正确的自定义“需要企业名称”错误消息。

如何停止显示默认错误消息？它应该始终使用自定义错误消息。

这是实时版本：https://stackblitz.com/edit/nuxt-starter-qlkfhp?file=components%2FMyForm.vue

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

<script setup lang="ts">
import { defineComponent } from 'vue';
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');
</script>

Answer 1

您可以使用

required_error

键来执行此操作：

例如：

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

您还可以在那里使用其他密钥您可以在此处查看