如何捕获React Hook Form验证错误并阻止错误时发送邮件

你当前的写法存在核心问题：直接调用handleSubmit(onSubmit)()后，未等待验证结果就执行了EmailJS发送逻辑，且handleSubmit在验证失败时不会抛出可被try/catch捕获的错误——它只会更新formState.errors状态，所以你的try/catch完全起不到拦截作用。

以下是两种可靠的解决方案：

方案一：将邮件发送逻辑移入onSubmit（推荐） #

handleSubmit的核心作用就是仅在表单验证通过时，才执行传入的回调函数。把邮件发送逻辑直接放到onSubmit里，就能天然保证只有验证通过才触发邮件发送。

修改后的完整代码：

import React, { useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { string, object, InferType } from "yup";
import emailjs from "@emailjs/browser";

type Props = InferType<typeof schema>;

const schema = object({
  firstName: string().required("First name is required"),
  lastName: string().required("Last name is required"),
});

function FormEmail() {
  const form = useRef(null);
  const [value, setValue] = useState<string | undefined>();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<Props>({
    resolver: yupResolver(schema),
  });

  // 验证通过后才会执行此函数
  const onSubmit = () => {
    emailjs
      .sendForm(
        "service_ztay5wh",
        "template_wcc4f29",
        form.current!,
        "aXbWTWKdwzgImlYqz"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <div>
      {/* 直接绑定handleSubmit处理表单提交 */}
      <form onSubmit={handleSubmit(onSubmit)} ref={form}>
        <h3>First Name</h3>
        <input
          id="firstName"
          type="text"
          {...register("firstName")}
        />
        <span className="error">{errors?.firstName?.message}</span>

        <h3>Last Name</h3>
        <input
          id="lastName"
          type="text"
          {...register("lastName")}
        />
        <span className="error">{errors?.lastName?.message}</span>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default FormEmail;

方案二：手动检查验证状态（适合需保留自定义提交函数的场景） #

如果必须保留自定义的sendEmail函数，可以通过检查formState.errors是否为空，来决定是否执行邮件发送：

const sendEmail = (e: { preventDefault: () => void }) => {
  e.preventDefault();
  // 触发验证逻辑
  handleSubmit(() => {})();
  
  // 检查是否存在验证错误
  if (Object.keys(errors).length > 0) {
    return; // 有错误则终止执行
  }

  emailjs
    .sendForm(
      "service_ztay5wh",
      "template_wcc4f29",
      form.current!,
      "aXbWTWKdwzgImlYqz"
    )
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
};

注意 #

方案一完全遵循React Hook Form的设计规范，无需手动处理验证状态判断，代码更简洁可靠，是官方推荐的写法。

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