React Hook Form中如何在输入字段卸载时移除校验规则？

核心问题分析 #

你遇到的问题是：当复选框未勾选时，隐藏的firstName字段仍被校验规则约束导致表单无法提交，但又不能直接移除校验规则（勾选时需要该字段必填）。使用shouldUnregister: true未生效，大概率是因为字段组件没被真正卸载（比如仅用CSS隐藏而非条件渲染移除），或校验规则未动态适配复选框状态。

解决方案 #

方案1：动态绑定校验规则 + 条件卸载组件

利用watch监听复选框状态，动态设置firstName的校验规则，同时确保未勾选时输入框完全从DOM中移除，配合shouldUnregister: true自动注销字段。

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

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm({
    shouldUnregister: true // 组件卸载时自动注销字段
  });

  // 监听复选框状态
  const isShowFirstName = watch("showFirstName");

  const onSubmit = (data) => {
    console.log(data);
    alert("表单提交成功");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="showFirstName">显示FirstName</label>
        <input
          type="checkbox"
          id="showFirstName"
          {...register("showFirstName")}
        />
      </div>

      {/* 仅当勾选时渲染输入框 */}
      {isShowFirstName && (
        <div>
          <label htmlFor="firstName">FirstName</label>
          <input
            type="text"
            id="firstName"
            {...register("firstName", {
              required: "FirstName为必填项" // 仅勾选时生效
            })}
          />
          {errors.firstName && <p>{errors.firstName.message}</p>}
        </div>
      )}

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

方案2：手动注册/注销字段

通过监听复选框的change事件，手动调用register和unregister方法，精准控制字段的校验状态。

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

export default function App() {
  const {
    register,
    handleSubmit,
    unregister,
    formState: { errors }
  } = useForm();

  const handleCheckboxToggle = (e) => {
    const isChecked = e.target.checked;
    if (isChecked) {
      // 勾选时注册字段并添加必填规则
      register("firstName", { required: "FirstName为必填项" });
    } else {
      // 取消勾选时注销字段，移除校验约束
      unregister("firstName");
    }
  };

  const onSubmit = (data) => {
    console.log(data);
    alert("表单提交成功");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="showFirstName">显示FirstName</label>
        <input
          type="checkbox"
          id="showFirstName"
          onChange={handleCheckboxToggle}
        />
      </div>

      {/* 条件渲染输入框 */}
      {document.getElementById("showFirstName")?.checked && (
        <div>
          <label htmlFor="firstName">FirstName</label>
          <input
            type="text"
            id="firstName"
            {...register("firstName")}
          />
          {errors.firstName && <p>{errors.firstName.message}</p>}
        </div>
      )}

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

关键注意点 #

• 确保未勾选时，firstName输入框是完全卸载（用条件渲染{isShow && ...}），而非仅通过display: none隐藏，否则shouldUnregister无法触发字段注销。
• 动态规则的核心是让required规则仅在复选框勾选时生效，这样未勾选时字段即使存在（如果没卸载）也不会触发校验，但推荐配合卸载组件的方式更稳妥。

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