如何在zod中制作自定义错误消息？

Question

我正在尝试为 zod 验证编写自定义错误消息。

这是我的架构对象，我在错误消息中传递了它。

const schema: ZodType<FormData> = z.object({
    firstName: z.string().nonempty(),
    lastName: z.string().nonempty(),
    email: z.string().email().min(5).nonempty(),
    pin: z.string( { invalid_type_error: "Must contain 4 digitsss "}).nonempty().min(4, "Must be 4 digits").max(4, "Must be 4 digits").regex(pinPattern),
    phoneNumber: z.string().nonempty().min(11),
    password: z.string().min(8).regex(Passwordregex).nonempty(),
    confirmPassword: z.string().min(8).nonempty(),
  }).refine(data => data.password === data.confirmPassword, {
    message: "Passwords don't match",
    path: ['confirmPassword']
  })

我尝试过字符串替换方法，但没有得到我想要的结果。

 {errors.
<span className='text-xs font-medium text-[#DC2626]'>{errors.firstName.message?.replace('String', 'First Name')}</}

Answer 1

您可以通过传递具有结构的对象{ message: "Custom error message here" }作为参数来在 zod 中使用自定义消息。

请注意，在较新版本的 Zod 中，nonempty()已弃用，您应该使用min(1) Source。

在上面的代码中，要显示需要名字的错误，可以按如下方式完成：

const schema: ZodType<FormData> = z.object({
  firstName: z.string().min(1, { message: "First Name is required" })
});

如果您的字段对最小字符数有要求，则.min()如果用户输入较少的字符作为参数，您可以将第二个字符与最小字符数和相应的错误消息链接起来。

Answer 2

import { ZodError, ZodIssue } from 'zod'

const formatZodIssue = (issue: ZodIssue): string => {
    const { path, message } = issue
    const pathString = path.join('.')

    return `${pathString}: ${message}`
}

// Format the Zod error message with only the current error
export const formatZodError = (error: ZodError): string => {
    const { issues } = error

    if (issues.length) {
        const currentIssue = issues[0]

        return formatZodIssue(currentIssue)
    }
}

并将验证代码包装在 trycatch 语句中：

 try {
      ...your code here  
    } catch (error) {
        console.error(error)
        throw new Error(formatZodError(error))
    }