如何在Zod中自定义表单验证的错误提示信息？

直接在Zod的验证规则里定义中文错误提示是最靠谱的方式，比事后字符串替换稳定得多。给你修改后的完整Schema：

const schema: ZodType<FormData> = z.object({
    firstName: z.string().nonempty("请输入名字"),
    lastName: z.string().nonempty("请输入姓氏"),
    email: z.string()
        .nonempty("请输入邮箱地址")
        .email("请输入有效的邮箱地址")
        .min(5, "邮箱长度不能少于5位"),
    pin: z.string({ invalid_type_error: "请输入4位数字" })
        .nonempty("请输入PIN码")
        .min(4, "PIN码必须是4位数字")
        .max(4, "PIN码必须是4位数字")
        .regex(pinPattern, "PIN码格式不正确"),
    phoneNumber: z.string()
        .nonempty("请输入手机号码")
        .min(11, "手机号码长度不能少于11位"),
    password: z.string()
        .nonempty("请输入密码")
        .min(8, "密码长度不能少于8位")
        .regex(Passwordregex, "密码格式不符合要求"),
    confirmPassword: z.string()
        .nonempty("请再次输入密码")
        .min(8, "确认密码长度不能少于8位"),
}).refine(data => data.password === data.confirmPassword, {
    message: "两次输入的密码不一致",
    path: ['confirmPassword']
})

为什么之前的字符串替换没生效？ #

Zod的默认错误文本不是固定的"String"，比如空值错误是"String must not be empty"，你只替换"String"会得到"First Name must not be empty"，还是英文结构；而且遇到邮箱格式错误这类文本里没有"String"的情况，替换完全不起作用。

如果非要用替换方式，得针对完整错误文本匹配，比如：

<span className='text-xs font-medium text-[#DC2626]'>
  {errors.firstName?.message?.replace("String must not be empty", "请输入名字")}
</span>

但这种方式需要覆盖所有可能的默认错误文本，维护起来非常麻烦，远不如直接在Schema里定义中文提示省心。

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