react-hook-form中register的validate选项未执行问题咨询

最常见的原因：默认只在提交时验证 #

React Hook Form 默认情况下，validate 回调只会在表单提交的时候才执行，输入框打字过程中不会自动触发——这是框架的默认行为，并非 bug，只是容易忽略文档里的触发时机说明。

解决办法 #

1. 修改全局验证模式 #

给 useForm 添加 mode 配置项，把验证触发时机改成输入时（onChange）或失焦时（onBlur）：

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm({
    mode: "onChange" // 可选值：onChange/onBlur/onSubmit/all
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", {
          validate: (value) => {
            console.log("validate 执行了！");
            return value.length > 3 || "用户名得至少4位";
          }
        })}
      />
      <button type="submit">提交</button>
    </form>
  );
}

2. 手动触发单个字段验证 #

不想修改全局模式的话，可以用 trigger 方法在输入事件里手动触发对应字段的验证：

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, trigger } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("username", {
          validate: (value) => {
            console.log("validate 执行了！");
            return value.length > 3 || "用户名得至少4位";
          }
        })}
        onChange={() => trigger("username")}
      />
      <button type="submit">提交</button>
    </form>
  );
}

3. 检查提交逻辑是否正确 #

必须确保表单的 onSubmit 事件绑定的是 handleSubmit 包裹的函数，否则整个验证流程不会启动：
❌ 错误写法：直接绑定自定义函数

<form onSubmit={onSubmit}>

✅ 正确写法：用 handleSubmit 包裹提交函数

<form onSubmit={handleSubmit(onSubmit)}>

额外排查点 #

• 确认 validate 函数返回值符合要求：返回 true 表示验证通过，返回字符串表示验证失败（错误提示）；异步验证需返回 Promise。
• 如果使用了 watch 监听字段变化，避免和 validate 逻辑冲突，不要覆盖 register 的配置项。

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