React Hook Form中reValidateMode为onChange时validate未触发的解决方法

要让register配置的自定义validate回调在输入变化时触发，你需要调整useForm的配置并确保验证逻辑正确：

关键配置修正 #

你当前只设置了reValidateMode: "onChange"，但这个参数仅控制已验证过的字段在值变化时是否重新验证。要让验证在输入变化时就触发，必须同时把mode设为"onChange"（或"onBlur"，根据你的交互需求），它决定了初始验证的触发时机：

const { register, formState: { errors } } = useForm({
  mode: "onChange",
  reValidateMode: "onChange"
});

正确编写validate回调 #

确保validate函数返回true（验证通过）或错误信息字符串/false（验证失败），示例：

<input
  {...register("email", {
    validate: (value) => {
      if (!value.includes("@")) {
        return "请输入有效的邮箱地址";
      }
      return true;
    }
  })}
  type="email"
/>
{errors.email && <span className="error">{errors.email.message}</span>}

常见坑点规避 #

• 不要在validate里写异步逻辑，异步验证请用Resolver或专门的异步验证方案
• 确保register正确绑定到输入元素，不要手动覆盖onChange事件（React Hook Form会自动处理）

这样配置后，每次输入值变化时，自定义的validate回调就会立即执行，错误信息也会实时更新。

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