React Hook Form 中基于触发源的动态表单验证策略

在表单开发过程中，我们经常遇到需要根据不同操作执行不同验证逻辑的需求。React Hook Form 作为流行的表单管理库，其灵活的设计允许开发者实现各种复杂的验证场景。本文将深入探讨如何实现基于不同触发源（如保存操作或提交操作）的动态表单验证策略。

业务场景分析

在实际业务中，表单验证通常需要区分不同场景：

1. 部分保存验证：当用户临时保存表单时，只需要验证必填字段，允许某些非关键字段为空
2. 完整提交验证：当用户最终提交表单时，需要执行所有字段的完整验证
3. 条件性字段设置：某些字段的值设置需要基于其他字段的验证结果

技术实现方案

自定义解析器方案

React Hook Form 的 resolver 属性支持自定义验证逻辑。我们可以通过扩展 resolver 的功能来实现基于触发源的验证：

const { handleSubmit, trigger } = useForm({
  resolver: async (values, context, options) => {
    // 根据触发源执行不同验证逻辑
    if (context.triggerSource === 'partialSave') {
      return validateForPartialSave(values);
    } else if (context.triggerSource === 'fullSubmit') {
      return validateForFullSubmit(values);
    }
    return validateDefault(values);
  }
});

触发源传递技巧

虽然当前版本没有直接提供触发源参数，但可以通过以下方式实现：

1. 使用 ref 存储状态：在调用 trigger 前设置一个 ref 值
2. 高阶函数封装：创建包装函数来传递额外参数
3. 上下文注入：利用 React 的 Context API 传递验证模式

const validationMode = useRef('default');

const handlePartialSave = async () => {
  validationMode.current = 'partial';
  await trigger();
  // 保存逻辑...
};

const handleFullSubmit = async () => {
  validationMode.current = 'full';
  await handleSubmit(onSubmit)();
};

条件性字段设置模式

对于需要基于其他字段验证结果来设置字段值的场景，可以采用以下模式：

const { setValue, trigger } = useForm();

const handleCheckboxChange = async (value) => {
  const isValid = await trigger('dependentField');
  if (isValid) {
    setValue('checkboxField', value);
  }
};

最佳实践建议

1. 明确验证模式：为每种操作定义清晰的验证规则
2. 用户反馈：在部分验证失败时提供明确的提示
3. 性能优化：避免不必要的重复验证
4. 代码组织：将不同验证逻辑模块化，保持代码可维护性

未来演进方向

React Hook Form 社区正在讨论更优雅的原生支持方案，可能包括：

1. 验证上下文参数的标准化
2. 内置的多模式验证支持
3. 更细粒度的验证触发控制

通过合理利用现有 API 和设计模式，开发者可以在当前版本中实现灵活的多场景表单验证需求，同时为未来的升级做好准备。