React Hook Form 7首次渲染invalid属性始终为false的问题求助

问题原因 #

React Hook Form 默认采用延迟验证策略，仅在用户与字段交互（输入、提交）后才会触发验证逻辑。因此首次渲染时，getFieldState返回的invalid属性会默认是false，即使字段未满足验证规则。

让首次渲染时invalid为true的方法 #

在初始化useForm时配置mode选项，强制组件挂载时就执行验证：

方案1：使用mode: "onMount" #

该模式会在组件挂载完成后立即触发所有字段的验证，这样首次渲染就能得到正确的invalid状态：

const { register, getFieldState, handleSubmit } = useForm({
  mode: "onMount",
  defaultValues: { firstName: "" } // 建议设置默认值，确保验证触发
});

方案2：使用mode: "all" #

该模式会在挂载、输入、提交等所有场景下触发验证，适合需要实时反馈的场景：

const { register, getFieldState, handleSubmit } = useForm({
  mode: "all",
  defaultValues: { firstName: "" }
});

其他判断输入有效性的方法 #

1. 直接访问formState.errors #

通过解构formState获取错误对象，若字段存在于errors中则说明无效：

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

// 判断firstName是否无效
const isFirstNameInvalid = !!errors.firstName;

2. 使用trigger手动触发验证 #

在点击Continue按钮时，手动触发对应字段的验证，根据返回的Promise结果决定是否进入下一步：

const { register, trigger, handleSubmit } = useForm();

const handleContinue = async () => {
  const isValid = await trigger("firstName");
  if (isValid) {
    // 进入下一步逻辑
  }
};

3. 结合watch与自定义验证 #

监听字段值变化，自行判断是否符合规则（适合复杂自定义场景）：

const { register, watch } = useForm();
const firstName = watch("firstName");

const isFirstNameInvalid = !firstName || firstName.length < 3;

getFieldState 中文说明 #

getFieldState 是useForm提供的方法，用于获取指定字段的状态信息，返回对象包含以下核心属性：

• invalid: 布尔值，标识字段是否不符合验证规则。默认情况下，仅在字段被交互或验证触发后才会更新状态。
• isTouched: 布尔值，标识字段是否被用户点击/输入过。
• isDirty: 布尔值，标识字段值是否与默认值不同。
• error: 字段的错误信息对象，验证失败时返回对应错误内容。

调用方式：getFieldState(fieldName: string)，例如getFieldState("firstName").invalid。

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