如何在React Hook Form中合并min与max校验错误？

你遇到的问题核心是：字段为空时会同时触发required和minLength校验，导致错误提示重复；分开判断minLength和maxLength又会出现多个提示的情况。以下是两种简洁的解决方案：

方案一：自定义validate统一处理长度校验 #

直接通过validate函数合并长度校验逻辑，确保只有当输入内容存在时才判断长度，避免和必填校验冲突：

<input
  {...register("subject", {
    required: "Subject is required",
    validate: value => {
      // 仅当输入内容不为空时才校验长度
      if (value && (value.length < 2 || value.length > 50)) {
        return "标题长度需在2-50字符之间";
      }
      return true;
    }
  })}
  disabled={isLoading}
  id="subject"
  autoComplete="on"
  type="text"
  placeholder="Subject"
  className={`w-full ${errors.subject ? "outline-error" : ""}`}
/>
{errors.subject && (
  <p className="text-error" role="alert">
    {errors.subject.message}
  </p>
)}

方案二：统一错误消息并判断错误类型 #

如果不想修改校验规则，可在渲染层调整错误提示的判断逻辑，优先处理必填错误，再统一处理长度相关错误：

<input
  {...register("subject", {
    maxLength: { value: 50, message: "标题长度需在2-50字符之间" },
    minLength: { value: 2, message: "标题长度需在2-50字符之间" },
    required: { value: true, message: "Subject is required" },
  })}
  disabled={isLoading}
  id="subject"
  autoComplete="on"
  type="text"
  placeholder="Subject"
  className={`w-full ${errors.subject ? "outline-error" : ""}`}
/>
{errors.subject?.type === "required" && (
  <p className="text-error" role="alert">
    {errors.subject.message}
  </p>
)}
{["minLength", "maxLength"].includes(errors.subject?.type) && (
  <p className="text-error" role="alert">
    {errors.subject.message}
  </p>
)}

为什么原来的写法会出问题？ #

默认情况下，当字段为空时，required和minLength会同时触发校验，导致错误提示重复显示。上述方案通过两种方式规避了这个问题：要么用validate函数控制校验时机，要么在渲染层优先判断必填错误，避免长度错误和必填错误同时显示。

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