Zod + react-hook-form未显示自定义邮箱校验错误信息问题

核心原因 #

你遇到的问题大概率是浏览器原生邮箱校验优先触发，覆盖了Zod的自定义错误提示——因为你的Input组件设置了type="email"，浏览器会自动执行原生格式校验，弹出默认的英文提示，导致Zod的校验逻辑没机会展示自定义消息。

解决方案步骤 #

1. 禁用浏览器原生表单校验 #

在你的表单标签上添加novalidate属性，彻底禁用原生校验，让Zod的校验逻辑完全接管：

<form onSubmit={handleSubmit(yourSubmitHandler)} novalidate>
  {/* 你的表单元素 */}
</form>

或者在useForm的配置中直接关闭原生校验：

const { register, handleSubmit, formState: { errors } } = useForm<LoginFormInputs>({
  resolver: zodResolver(loginSchema),
  nativeValidation: false // 禁用原生校验
});

2. 确认Zod的email校验写法正确 #

Zod的email()方法接受包含message属性的对象作为参数，你的写法是正确的，再确认一次：

const loginSchema = z.object({
  email: z.string().email({ message: t("login.invalidEmailFormat") }),
  password: z.string().min(6, t("login.passwordTooShort")),
});

3. 验证翻译文本是否正确加载 #

在组件中临时添加日志，确认t("login.invalidEmailFormat")返回的是你预期的自定义提示，而不是未翻译的key：

console.log("邮箱错误提示：", t("login.invalidEmailFormat"));

如果输出的是login.invalidEmailFormat本身，说明i18n的翻译配置有问题，需要先确保翻译文件中存在对应的key和值。

4. 确认react-hook-form的错误捕获正常 #

打印errors对象，检查Zod的校验结果是否被正确捕获：

console.log("表单错误：", errors);

如果errors.email?.message显示的是你的自定义文本，说明Zod逻辑正常，只是之前被原生校验拦截了。

额外检查 #

确保你的Input组件正确接收并渲染helperText——从你的Input代码来看，helperText会被透传给MUI的TextField，这部分逻辑是没问题的。

内容的提问来源于stack exchange，提问作者Dima Malko