reactjs - 如何在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

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))
    }