react-hook-form结合Zod自定义错误消息失效，均显示Required

一、检查Zod Schema的错误消息配置 #

确保你在Zod的校验规则中正确传入自定义提示，避免使用默认的"Required"：
错误写法（默认提示）：

const schema = z.object({
  email: z.string().required()
});

正确写法（自定义提示）：

const schema = z.object({
  email: z.string().required("请输入您的邮箱地址"),
  password: z.string().min(6, "密码长度不能少于6位").required("密码不能为空")
});

二、确认React Hook Form的Resolver配置 #

必须通过@hookform/resolvers/zod将Zod规则与react-hook-form绑定，否则会使用react-hook-form默认校验，导致自定义消息失效：

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { registerSchema } from "./schema";

function RegisterForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(registerSchema),
    mode: "onSubmit" // 可根据需求设置onBlur/onChange等模式
  });

  // 提交逻辑
  const onSubmit = (data) => {
    console.log(data);
  };

  // ... 表单渲染
}

三、检查通用Input组件的错误读取逻辑 #

确保通用Input组件正确读取errors对象中的message属性，而非硬编码"Required"：
错误写法（硬编码提示）：

function Input({ label, name, register }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <input {...register(name)} />
      {errors[name] && <span className="error">Required</span>}
    </div>
  );
}

正确写法（读取Zod自定义消息）：

function Input({ label, name, register, errors }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <input {...register(name)} />
      {errors[name] && <span className="error">{errors[name].message}</span>}
    </div>
  );
}

同时在父组件中正确传递errors参数：

// 表单组件中调用Input
<Input 
  label="邮箱" 
  name="email" 
  register={register} 
  errors={errors} 
/>

四、避免在register中重复设置校验规则 #

如果在register方法中额外设置required: true，会覆盖Zod的校验配置，导致自定义消息失效：
错误写法：

<input {...register("email", { required: true })} />

正确写法：

<input {...register("email")} />

完全依赖Zod Schema定义的校验规则即可，react-hook-form会通过resolver同步这些规则。

五、确认提交逻辑正确 #

确保使用handleSubmit处理表单提交，避免手动拦截错误消息：

<form onSubmit={handleSubmit(onSubmit)}>
  <Input label="邮箱" name="email" register={register} errors={errors} />
  <Input label="密码" name="password" register={register} errors={errors} />
  <button type="submit">完成注册</button>
</form>

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