Yup+React Hook Form依赖字段变更时关联错误信息更新方法

react-hook-form 默认仅对当前触发值变更的字段执行校验，不会自动识别字段间的依赖关系做级联校验。你配置的onChange校验模式，在切换银行下拉选项时，只会校验account.bank字段本身，不会主动重新校验依赖bank值的account.accountNumber字段，因此账号的错误提示会停留在上一次校验结果，直到手动修改账号内容触发该字段自身的校验才会更新。

推荐直接使用react-hook-form原生提供的依赖字段配置，不需要额外写监听逻辑：

最优方案：给字段配置deps依赖 #

register方法支持deps配置项，用于声明当前字段校验依赖的其他字段，当依赖字段值变更时，会自动触发当前字段的重校验。
你只需要修改账号输入框的注册逻辑，加上deps配置即可：

<input
  type="text"
  placeholder="Account Number"
  {...register("account.accountNumber", {
    // 声明账号字段校验依赖银行选择字段
    deps: ["account.bank"]
  })}
/>

配置完成后，切换银行选项时会自动触发账号字段的重校验，错误提示会同步更新为对应银行的规则提示，符合交互预期。

备选方案：手动触发关联字段校验 #

如果需要更灵活的校验触发控制，可以从useForm中解构出watch、trigger方法，监听银行字段变化，在合适的时机手动触发账号字段校验：

export default function App() {
  const {
    handleSubmit,
    register,
    watch,
    trigger,
    formState: { errors, touchedFields }
  } = useForm({
    resolver: yupResolver(schema),
    mode: "onChange",
    reValidateMode: "onChange"
  });

  // 监听银行选择值
  const currentBank = watch("account.bank");
  React.useEffect(() => {
    // 仅当账号字段已经被用户交互过（有过输入/提交记录）才触发重校验，避免首次加载就弹出错误
    if (touchedFields.account?.accountNumber) {
      trigger("account.accountNumber");
    }
  }, [currentBank, trigger, touchedFields]);

  const submit = (data) => {
    console.log("submit data", data);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit(submit)}>
        <label>
          Bank Name
          {/* 建议给option显式配置value，和yup判断逻辑保持一致，避免文本修改导致规则匹配错误 */}
          <select {...register("account.bank")}>
            <option value="Andhra">Andhra Bank</option>
            <option value="SBI">SBI</option>
            <option value="HDFC">HDFC</option>
          </select>
          <p>{errors.account?.bank?.message}</p>
        </label>
        <label>
          Account Number
          <input
            type="text"
            placeholder="Account Number"
            {...register("account.accountNumber")}
          />
          <p>{errors?.account?.accountNumber?.message}</p>
        </label>
        <input type="submit" />
      </form>
    </div>
  );
}

注意：如果使用显式option value的写法，需要同步修改yup中when的判断逻辑，将Andhra银行的分支判断匹配为bank === "Andhra"，避免规则匹配出错。

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