如何为react-hook-form实现表单验证提示与提交成功反馈？

一、添加表单验证提示 #

1. 配置验证规则（两种方式可选） #

方式一：使用Yup resolver（推荐，支持复杂验证逻辑）

首先安装依赖：

npm install yup @hookform/resolvers

定义验证Schema并配置到useForm：

import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// 定义字段验证规则
const formSchema = yup.object().shape({
  name: yup.string().required("姓名不能为空"),
  email: yup.string().email("请输入有效的邮箱格式").required("邮箱不能为空"),
  message: yup.string().min(10, "留言内容不能少于10个字符").required("留言不能为空"),
  phone: yup.string().matches(/^1[3-9]\d{9}$/, "请输入有效的手机号").optional()
});

// 初始化useForm时绑定resolver
const { 
  control, 
  handleSubmit, 
  formState: { errors, isSubmitting },
  reset
} = useForm({
  defaultValues: { name: "", email: "", message: "", phone: "" },
  resolver: yupResolver(formSchema)
});

方式二：直接在Controller中配置规则（适合简单验证）

无需额外依赖，直接给Controller添加rules属性：

<Controller
  name="name"
  control={control}
  rules={{ required: "姓名不能为空" }}
  render={({ field }) => (/* 输入框渲染 */)}
/>

2. 渲染验证错误提示 #

在每个输入框下方添加错误信息展示：

<Controller
  name="name"
  control={control}
  render={({ field }) => (
    <div className="form-group">
      <label>姓名</label>
      <input {...field} type="text" className="form-input" />
      {/* 显示错误提示 */}
      {errors.name && <span className="error-text">{errors.name.message}</span>}
    </div>
  )}
/>

<Controller
  name="email"
  control={control}
  render={({ field }) => (
    <div className="form-group">
      <label>邮箱</label>
      <input {...field} type="email" className="form-input" />
      {errors.email && <span className="error-text">{errors.email.message}</span>}
    </div>
  )}
/>

添加基础错误样式：

.error-text {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

二、添加提交成功/失败反馈 #

1. 定义状态管理反馈信息 #

在组件中添加状态用于存储反馈内容：

import { useState } from "react";

const [submitFeedback, setSubmitFeedback] = useState({
  type: "", // success/error
  message: ""
});

2. 处理提交结果并更新反馈 #

修改提交函数，根据请求结果设置反馈信息：

const onSubmit = async (formData) => {
  try {
    await SubmitContact(formData); // 你的axios提交函数
    setSubmitFeedback({
      type: "success",
      message: "提交成功！我们会尽快与你取得联系。"
    });
    reset(); // 提交成功后重置表单
    // 5秒后自动清除反馈
    setTimeout(() => setSubmitFeedback({ type: "", message: "" }), 5000);
  } catch (err) {
    setSubmitFeedback({
      type: "error",
      message: "提交失败，请检查网络后重试。"
    });
  }
};

3. 渲染反馈提示 #

在表单下方添加反馈展示区域：

{submitFeedback.message && (
  <div className={`feedback-alert ${submitFeedback.type}`}>
    {submitFeedback.message}
  </div>
)}

添加反馈样式：

.feedback-alert {
  padding: 0.75rem 1.25rem;
  border-radius: 0.25rem;
  margin-top: 1rem;
}
.feedback-alert.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.feedback-alert.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

额外优化：防止重复提交 #

利用isSubmitting状态禁用提交按钮：

<button 
  type="submit" 
  disabled={isSubmitting}
  className="submit-btn"
>
  {isSubmitting ? "提交中..." : "提交表单"}
</button>

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