如何使用react-hook-form验证多标签页下的所有输入字段？

核心原因 #

当前仅校验可见标签页字段，是因为隐藏标签页的表单字段被卸载了（比如用{activeTab === 'tab1' && <Input />}这类条件渲染），未挂载的字段不会被React Hook Form注册，自然无法参与验证。

解决方案一：用CSS隐藏字段而非卸载组件 #

保留所有标签页的表单字段在DOM中，通过CSS控制显示/隐藏，这样所有字段都已被register注册，提交时会自动触发全量验证。

示例代码：

// 自定义标签页容器组件
const TabPanel = ({ active, children }) => (
  <div style={{ display: active ? 'block' : 'none' }}>
    {children}
  </div>
);

// 组件中使用
<TabPanel active={activeTab === 'tab1'}>
  {/* 标签页1的表单字段始终挂载，仅通过CSS隐藏 */}
  <input {...register('username', { required: '用户名不能为空' })} />
</TabPanel>
<TabPanel active={activeTab === 'tab2'}>
  {/* 标签页2的表单字段始终挂载，仅通过CSS隐藏 */}
  <input {...register('email', { required: '邮箱不能为空', pattern: { value: /^\S+@\S+$/i, message: '邮箱格式不正确' } })} />
</TabPanel>

解决方案二：手动触发全字段验证（适合必须卸载组件的场景） #

如果因性能或其他原因必须卸载隐藏标签页的组件，可以在提交时用React Hook Form的trigger方法手动触发所有字段的验证：

1. 先定义所有表单字段的名称集合：

const allFormFields = ['username', 'email', 'phone', 'address']; // 包含所有标签页的字段名

2. 提交时触发全量验证：

const { trigger, handleSubmit } = useForm({
  defaultValues: {
    username: '',
    email: '',
    phone: '',
    address: ''
  }
});

const onSubmit = handleSubmit(async (data) => {
  // 触发所有字段的验证
  const isValid = await trigger(allFormFields);
  if (!isValid) return;
  // 验证通过后执行提交逻辑
  console.log('提交数据:', data);
});

注意：这种方式需要确保所有字段的验证规则已在register或useForm的defaultValues中定义，即使字段未挂载，trigger依然能根据规则完成验证。

额外提示 #

• 不要设置shouldUnregister: true，这会导致卸载的字段被移除注册，无法触发验证。
• 若使用自定义表单组件，确保组件在隐藏时依然保留register的引用，避免在条件渲染中包裹register逻辑。

内容的提问来源于stack exchange，提问作者Đức Long