react-hook-form未提交前不显示实时错误的问题及解决咨询

这是既定规格还是Bug？ #

这是 React Hook Form 的既定设计，并非 Bug。

React Hook Form 默认采用 onSubmit 校验模式：只有当用户提交表单时，才会触发字段校验并展示错误信息。提交后，字段会被标记为「已触碰（touched）」状态，此时后续的输入事件（如 keyup）会触发实时校验更新错误——这一逻辑是官方为了减少初始不必要的校验开销、提升表单性能而设计的。

实现从一开始就随 keyup 实时显示错误 #

通过修改 useForm 的配置参数，调整校验触发时机即可实现：

方法1：全局配置校验模式 #

在初始化 useForm 时设置 mode 为 onKeyUp 或 onChange，让所有字段从一开始就随输入事件触发校验：

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

type FormInputs = {
  email: string;
  password: string;
};

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormInputs>({
    // 设置为onKeyUp，在按键抬起时触发校验
    mode: "onKeyUp" 
    // 也可以用onChange，值变化时立即触发校验
    // mode: "onChange"
  });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email", { required: "Email is required" })} />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("password", { required: "Password is required" })} />
      {errors.password && <p>{errors.password.message}</p>}

      <input type="submit" />
    </form>
  );
}

方法2：单个字段手动触发校验 #

如果只需要特定字段实现实时校验，可以在字段的 onKeyUp 事件中手动调用 trigger 方法触发校验：

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

type FormInputs = {
  email: string;
  password: string;
};

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
    trigger // 引入trigger方法
  } = useForm<FormInputs>();

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("email", { required: "Email is required" })}
        onKeyUp={() => trigger("email")} // 按键抬起时触发该字段校验
      />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register("password", { required: "Password is required" })} />
      {errors.password && <p>{errors.password.message}</p>}

      <input type="submit" />
    </form>
  );
}

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