自定义Zod错误信息的实现

在Vue 3和VeeValidate的组合式API中，我们经常会使用Zod来进行表单验证。然而，在处理自定义错误信息时，可能会遇到一些问题。本文将通过一个实例，展示如何在VeeValidate中使用Zod进行表单验证，并自定义错误信息，确保无论是输入还是未输入状态下都能展示自定义的错误信息。

背景

当使用VeeValidate和Zod进行表单验证时，默认的错误信息可能会在特定情况下出现，而不是我们期望的自定义信息。例如，在输入框未填写任何内容并失去焦点时，可能会显示默认的Zod错误信息“Required”，而不是我们设定的“Business name is required”。

问题实例

假设我们有一个简单的业务名称输入表单：

<template> <form> <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({ business