React Hook Form中setError自定义错误无法阻止表单提交的解决诉求

你遇到的问题核心是：手动调用setError仅能显示错误提示，但没有让React Hook Form的表单提交逻辑感知到该错误并终止提交流程。下面提供两种可行的解决方案：

方案一：提交时手动校验并拦截 #

在表单提交函数中先执行重复校验，若发现重复则设置错误并终止提交流程，同时保留失焦时的提前校验提示：

import { useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

function AddUserForm() {
  const { register, handleSubmit, setError, clearErrors, formState: { errors } } = useForm();

  // 替换为你的实际重复校验逻辑
  const handleCheckExisting = async (loginId) => {
    const res = await fetch(`/api/check-login-id?loginId=${loginId}`);
    return res.json(); // 返回存在的对象或undefined
  };

  const onSubmit = async (data) => {
    const loginId = data.loginId.trim();
    const exists = await handleCheckExisting(loginId);
    if (exists) {
      setError('loginId', { message: '该登录ID已存在' });
      return; // 终止提交流程
    }
    // 执行正常的表单提交逻辑
    console.log('提交用户数据:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        {...register('loginId', { required: '登录ID不能为空' })}
        label="登录ID"
        onBlur={async (e) => {
          const loginId = e.target.value.trim();
          if (!loginId) return;
          const exists = await handleCheckExisting(loginId);
          if (exists) {
            setError('loginId', { message: '该登录ID已存在' });
          } else {
            clearErrors('loginId');
          }
        }}
        error={!!errors.loginId}
        helperText={errors.loginId?.message}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary">
        添加用户
      </Button>
    </form>
  );
}

方案二：整合到React Hook Form异步校验规则（推荐） #

将重复校验逻辑直接注册为字段的异步校验规则，让React Hook Form自动管理校验状态，在失焦和提交时自动触发校验并阻止提交：

import { useForm } from "react-hook-form";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

function AddUserForm() {
  // 设置校验模式为失焦时触发，也可根据需求选'onSubmit'或'all'
  const { register, handleSubmit, formState: { errors } } = useForm({
    mode: 'onBlur'
  });

  // 替换为你的实际重复校验逻辑
  const handleCheckExisting = async (loginId) => {
    const res = await fetch(`/api/check-login-id?loginId=${loginId}`);
    return res.json();
  };

  const onSubmit = (data) => {
    // 仅需处理正常提交逻辑，校验不通过时React Hook Form会自动阻止提交
    console.log('提交用户数据:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
        {...register('loginId', {
          required: '登录ID不能为空',
          // 异步校验规则
          validate: async (value) => {
            const loginId = value.trim();
            if (!loginId) return true; // 空值交由required规则处理
            const exists = await handleCheckExisting(loginId);
            return exists ? '该登录ID已存在' : true;
          }
        })}
        label="登录ID"
        error={!!errors.loginId}
        helperText={errors.loginId?.message}
        fullWidth
        margin="normal"
      />
      <Button type="submit" variant="contained" color="primary">
        添加用户
      </Button>
    </form>
  );
}

为什么之前的方式无法阻止提交？ #

手动调用setError只是给字段标记了错误状态，但React Hook Form的默认提交逻辑不会自动因为手动设置的错误终止流程。方案一中通过提交时手动校验并返回，方案二则利用内置的异步校验规则，让表单自动感知校验结果并拦截提交，后者更符合React Hook Form的设计理念，也减少了手动状态管理的代码。

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