react-hook-form如何执行单字段所有校验并展示全部错误提示

React Hook Form 默认校验逻辑是单字段命中第一个失败规则后就终止后续校验，因此formState.errors默认只会返回单个字段的第一个错误，不会收集全部失败规则的提示，这就是输入123时只看到minLength错误的核心原因。

要实现单字段所有校验规则全部执行、所有错误逐条展示，只需要调整对应配置即可：

• 初始化useForm时，将criteriaMode参数设置为all，开启单字段全量错误收集模式

const {
  register,
  handleSubmit,
  formState: { errors }
} = useForm({
  // 核心配置：不提前终止校验，收集单字段所有失败的校验结果
  criteriaMode: "all"
});

开启该配置后，字段注册的所有校验规则会全部执行，对应字段的错误会存放在errors[字段名].types对象中，对象的键为校验规则名，值为对应错误提示。建议给每个校验规则配置明确的提示文案，方便直接渲染：

{...register("firstName", {
  minLength: {
    value: 5,
    message: "输入内容长度不能少于5个字符"
  },
  pattern: {
    value: /^[A-Za-z]+$/i,
    message: "仅支持输入英文字母，不能包含数字或特殊符号"
  }
})}

渲染错误时，遍历对应字段types下的所有提示值，即可实现纵向逐条展示所有错误：

{errors.firstName && (
  <div className="error-container">
    {Object.values(errors.firstName.types || {}).map((msg, index) => (
      <p key={index} className="error-item" style={{ color: 'red', margin: '4px 0' }}>
        {msg}
      </p>
    ))}
  </div>
)}

以上配置完成后，当firstName字段输入123时，会同时展示「长度不足」「格式不符合」两条错误提示，符合预期效果。

补充说明：如果使用zod、yup等第三方校验schema配合resolver使用，criteriaMode: "all"的配置同样生效，会自动收集schema返回的该字段所有校验错误。

内容的提问来源于stack exchange，提问作者durgesh.patle