react-hook-form 如何在表单加载时无需点击提交显示全部错误信息

实现方案 #

以下方案适配你使用的5.7.2版本，无需升级依赖即可直接使用

通过react-hook-form内置的trigger()主动触发全表单校验，配合useEffect在组件挂载完成后执行，即可实现页面加载完成直接展示所有校验错误的效果。

完整代码示例 #

import React, { useEffect } from 'react';
import { useForm } from 'react-hook-form';

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

  const submitHandler = (data) => console.log('提交数据：', data);

  // 组件挂载后自动触发全表单校验
  useEffect(() => {
    trigger(); // 无参数默认校验所有表单字段
  }, [trigger]);

  return (
    <form onSubmit={handleSubmit(submitHandler)}>
      <input
        name="username"
        ref={register({
          required: '用户名不能为空',
          minLength: { value: 3, message: '用户名长度不能少于3位' }
        })}
      />
      {errors.username && <span className="error">{errors.username.message}</span>}

      <input
        name="phone"
        ref={register({
          required: '手机号不能为空',
          pattern: { value: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
        })}
      />
      {errors.phone && <span className="error">{errors.phone.message}</span>}

      <button type="submit">提交</button>
    </form>
  );
}

扩展说明 #

• 若只需校验指定字段，可向trigger()传入对应字段名或字段名数组，示例：

  trigger('username'); // 仅校验用户名字段
  trigger(['username', 'phone']); // 仅校验用户名、手机号两个字段
  

• 若需要在校验完成后执行后续逻辑，可通过异步方式接收校验结果：

  useEffect(() => {
    const runValidate = async () => {
      const isValid = await trigger();
      // 校验完成后执行的逻辑
      console.log('表单是否校验通过：', isValid);
    };
    runValidate();
  }, [trigger]);
  

内容的提问来源于stack exchange，提问作者Pradeepta Kumar Khatoi