React Hook Form中自定义错误信息的显示位置问题

React Hook Form 不会自动渲染自定义错误信息，需要你手动获取错误对象并在页面指定位置渲染，具体操作如下：

1. 从 useForm 中解构错误对象
   初始化 useForm 时，要从 formState 里拿到 errors（v7 及以上版本的标准写法）：

   const { register, handleSubmit, formState: { errors } } = useForm();
   

2. 注册输入框时配置自定义错误规则
   在 register 方法里为字段设置 required、pattern 等验证规则，并传入自定义错误信息：

   <input
     type="text"
     {...register('code', {
       required: '请填写3位数字',
       pattern: {
         value: /^\d{3}$/,
         message: '必须是3位数字格式'
       }
     })}
   />
   

3. 在输入框附近渲染错误信息
   通过 errors 对象获取对应字段的错误，在输入框下方或合适位置显示：

   {errors.code && <span style={{ color: 'red', fontSize: '12px' }}>{errors.code.message}</span>}
   

补充说明 #

• React Hook Form 默认会给表单添加 novalidate 属性，禁用原生约束验证提示，所以不会弹出原生默认提示框，需要你自行实现错误信息的渲染逻辑。
• 也可以用官方提供的 ErrorMessage 组件简化渲染：

  import { ErrorMessage } from '@hookform/error-message';
  
  <ErrorMessage 
    errors={errors} 
    name="code" 
    render={({ message }) => <span style={{ color: 'red' }}>{message}</span>} 
  />
  

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