React Hook Form 中 reValidateMode: 'onBlur' 的提交行为解析

问题背景

在使用 React Hook Form 进行表单验证时，开发者经常会遇到一个特殊场景：当设置 reValidateMode: 'onBlur' 时，如果表单存在单个错误，而用户通过点击提交按钮来触发 blur 事件并修复错误，表单可能不会按预期提交。

核心问题分析

这种现象的根本原因在于 React Hook Form 的验证机制与浏览器事件触发的顺序：

1. 当表单存在验证错误时，提交按钮的点击事件会被阻止
2. 点击提交按钮会同时触发输入框的 blur 事件
3. blur 事件会触发重新验证，清除错误状态
4. 但此时原始的提交事件已经被阻止，不会自动重新触发

解决方案探讨

方案一：手动触发验证

可以通过在提交按钮的点击事件中手动触发验证来解决：

const { trigger } = useForm();

const handleClick = async () => {
  await trigger();
  handleSubmit(onSubmit)();
};

方案二：状态监听方案

更完整的解决方案是监听表单状态变化，在验证通过后自动提交：

const { register, handleSubmit, formState } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onBlur'
});
const [blurState, setBlurState] = React.useState({});

const handBlurEvent = (e) => {
  onBlur(e);
  setBlurState({...blurState, "fieldName": true});
};

React.useEffect(() => {
  if(blurState.fieldName && !formState.isValidating && !formState.errors.fieldName) {
    handleSubmit(onSubmit)();
    setBlurState({...blurState, "fieldName": false});
  }
}, [blurState, formState]);

最佳实践建议

1. 明确验证时机：根据业务需求选择合适的验证模式，onBlur 适合需要即时反馈但不希望频繁验证的场景

2. 用户体验优化：考虑在提交时添加视觉反馈，让用户明确知道表单正在处理

3. 错误处理：对于复杂表单，建议结合多种验证模式，如 onChange 和 onBlur 的组合

4. 性能考量：大量字段的表单使用 onBlur 验证可以减少不必要的渲染

总结

React Hook Form 的验证机制提供了灵活的配置选项，但需要开发者理解其内部工作原理。通过合理组合手动触发和自动状态监听，可以解决 reValidateMode: 'onBlur' 下的提交问题，同时保持良好的用户体验。在实际开发中，应根据具体场景选择最适合的验证策略。