如何移除HTML默认邮箱错误提示，改用React-Hook-Form+Zod自定义提示

问题说明 #

你当前遇到两个验证相关的问题：

• HTML原生邮箱错误提示会覆盖Zod自定义的「email address is not valid」提示
• 必填提示「input is required」未出现在errors对象中

修复步骤 #

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

浏览器会对type="email"的输入框自动做原生验证，导致自定义提示被覆盖。只需在<form>标签添加noValidate属性即可禁用原生验证：

<form onSubmit={handleSubmit(handleMailSubmit)} noValidate>
  {/* 原有表单内容保持不变 */}
</form>

2. 修正Zod Schema的必填验证逻辑 #

原代码中z.string().min(1)对空字符串的验证不够精准，改用Zod专门的nonempty方法处理必填场景，确保空输入时能触发错误：

const emailInputSchema = z.object({
  email: z.string().nonempty("input is required").email("email address is not valid"),
});

3. 检查自定义错误映射（可选） #

如果不需要自定义错误映射，建议移除customErrorMap，避免它干扰错误信息的正常输出：

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
  reset,
} = useForm<TEmailInputSchema>({
  resolver: zodResolver(emailInputSchema),
});

若必须保留customErrorMap，请确保它正确处理nonempty对应的错误代码，否则会导致必填错误信息无法正常显示。

修复后效果 #

• 提交空输入时，会显示「input is required」提示
• 输入格式错误的邮箱时，会显示自定义的「email address is not valid」，不再出现浏览器原生提示

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