React表单验证：结合Yup实现客户端校验与处理服务端提交错误-js教程-PHP中文网

react表单验证：结合yup实现客户端校验与处理服务端提交错误

本教程详细阐述了如何在React应用中结合react-hook-form和yup进行客户端表单验证，并重点解决了yup无法处理的服务器端提交错误。通过引入React的useState管理服务器响应的错误信息，并根据HTTP状态码或服务器返回数据动态显示错误提示，确保用户获得全面且准确的验证反馈。

1. 客户端表单验证与Yup

在React应用中，react-hook-form是一个流行的表单库，它提供了高性能、灵活且易于使用的表单管理能力。结合yup这个强大的JavaScript schema验证库，我们可以轻松实现复杂的客户端表单验证逻辑。

客户端验证的主要目的是在数据发送到服务器之前，对用户输入进行即时检查，例如验证字段是否为空、格式是否正确（如邮箱格式、密码长度等）。这能显著提升用户体验，减少不必要的服务器请求。

以下是一个使用yup定义验证schema的示例，它用于检查用户名和密码是否已填写：

import * as yup from "yup";

// 定义验证 schema
const schema = yup.object({
  username: yup.string().required("用户名是必填字段"),
  password: yup.string().required("密码是必填字段"), // 这里的“密码不正确”提示仅是针对必填的，并非业务逻辑
}).required();

登录后复制

在React组件中，我们可以这样整合react-hook-form和yup：

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

// ... (schema 定义同上)

function Login() {
  const {
    handleSubmit,
    register,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema), // 使用 yupResolver 链接 yup schema
  });

  const formSubmit = (data) => {
    console.log("客户端验证通过的数据:", data);
    // 这里将发送数据到服务器
  };

  return (
    <form onSubmit={handleSubmit(formSubmit)}>
      <div>
        <label htmlFor="username">用户名</label>
        <input id="username" type="text" {...register("username")} />
        {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}
      </div>
      <div>
        <label htmlFor="password">密码</label>
        <input id="password" type="password" {...register("password")} />
        {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
      </div>
      <button type="submit">登录</button>
    </form>
  );
}

登录后复制

2. 服务器端验证的必要性与Yup的局限性

尽管yup在客户端验证方面表现出色，但它无法处理需要与后端数据库进行交互才能确定的验证逻辑。例如，yup可以检查密码是否为空，但它无法判断用户输入的密码是否与数据库中存储的某个账户的密码匹配。这种业务逻辑层面的验证必须在服务器端进行。

当用户尝试登录时，服务器需要验证用户名是否存在、密码是否正确。如果凭据不匹配，服务器会返回一个错误响应。yup无法捕获和显示这类服务器端返回的错误信息，因为它只关注前端定义的schema规则。

3. 处理服务器端提交错误

为了处理服务器端返回的提交错误（例如“用户名或密码不正确”），我们需要在React组件中引入额外的状态管理机制。核心思路是使用React的useState钩子来存储服务器返回的错误信息，并在UI中进行展示。

Booltool

常用AI图片图像处理工具箱

140

查看详情

3.1 步骤一：定义错误状态

在你的React组件中，创建一个新的状态变量来存储服务器端返回的错误信息。

import React, { useState } from "react";
// ... 其他导入

function Login() {
  const [submissionError, setSubmissionError] = useState(""); // 用于存储服务器提交错误
  // ... 其他状态和 hook

登录后复制

3.2 步骤二：修改表单提交逻辑

在formSubmit函数中，当fetch请求完成并收到服务器响应时，根据响应的状态和内容来设置submissionError。

这里有两种常见的策略：

策略一：解析服务器返回的JSON数据中的错误信息 服务器通常会在错误响应中包含一个JSON对象，其中包含详细的错误消息。

  const formSubmit = (data) => {
    setSubmissionError(""); // 每次提交前清除之前的错误信息
    fetch("http://localhost:3001/login", {
      method: "POST",
      body: JSON.stringify({ username: data.username, password: data.password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => {
        if (response.status === 200) {
          // 登录成功
          // props.router.navigate("/"); // 导航到其他页面
          // setIsLoggedIn(true); // 更新登录状态
          console.log("登录成功");
          return response.json(); // 如果成功也可能返回数据
        } else {
          // 登录失败，处理错误响应
          return response.json().then((responseData) => {
            // 假设服务器返回 { error: "用户名或密码不正确" }
            setSubmissionError(responseData.error || "登录失败，请重试。");
            throw new Error(responseData.error || "登录失败"); // 抛出错误以便后续catch捕获
          });
        }
      })
      .then((responseData) => {
        // 处理成功响应数据
        console.log("成功响应数据:", responseData);
      })
      .catch((error) => {
        console.error("网络或解析错误:", error);
        // 如果错误已经在then块中设置，这里可以不再设置
        // 如果是网络错误，可以设置通用的错误信息
        if (!submissionError) { // 避免覆盖更具体的服务器错误
            setSubmissionError("网络连接错误，请稍后再试。");
        }
      });
  };

登录后复制

策略二：根据HTTP状态码自定义错误信息 如果服务器只返回状态码而没有详细的错误JSON，你可以根据状态码在前端自定义错误消息。

  const formSubmit = (data) => {
    setSubmissionError(""); // 每次提交前清除之前的错误信息
    fetch("http://localhost:3001/login", {
      method: "POST",
      body: JSON.stringify({ username: data.username, password: data.password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => {
        if (response.status === 200) {
          // 登录成功
          // ... 成功处理逻辑
          console.log("登录成功");
        } else {
          // 根据不同的 HTTP 状态码设置不同的错误信息
          if (response.status === 401) { // Unauthorized
            setSubmissionError("用户名或密码不正确。");
          } else if (response.status === 400) { // Bad Request
            setSubmissionError("请求参数有误，请检查。");
          } else if (response.status === 500) { // Internal Server Error
            setSubmissionError("服务器内部错误，请稍后再试。");
          } else {
            setSubmissionError("登录失败，请重试。");
          }
        }
      })
      .catch((error) => {
        console.error("Error:", error);
        setSubmissionError("网络连接错误，请稍后再试。");
      });
  };

登录后复制

3.3 步骤三：在UI中显示错误

在你的JSX中，条件性地渲染submissionError状态。通常，这个错误会显示在表单的顶部，因为它是一个整体的提交错误，而不是针对某个特定字段的错误。

  return (
    <div className="login-form">
      <h1>登录</h1>
      {submissionError && <p style={{ color: 'red', textAlign: 'center' }}>{submissionError}</p>} {/* 显示服务器错误 */}
      <form onSubmit={handleSubmit(formSubmit)}>
        {/* ... 用户名和密码输入框 */}
        <div>
          <label htmlFor="username">用户名</label>
          <input id="username" type="text" {...register("username")} />
          {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}
        </div>
        <div>
          <label htmlFor="password">密码</label>
          <input id="password" type="password" {...register("password")} />
          {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
        </div>
        <button type="submit">登录</button>
      </form>
    </div>
  );

登录后复制

4. 完整示例代码整合

将上述修改整合到原始的Login组件中，我们可以得到一个同时处理客户端和服务器端验证的完整示例。

import React, { useState } from "react";
// import Input from "./Input"; // 假设 Input 组件是自定义的，这里简化为原生 input
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import { useLocation, useNavigate, useParams } from "react-router-dom";
// import useAuth from "../Components/Zustand - Auth/authLogin"; // 假设存在认证 hook

// 路由 HOC，如果不需要可以移除
function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }
  return ComponentWithRouterProp;
}

// Yup 验证 schema
const schema = yup.object({
  username: yup.string().required("用户名是必填字段"),
  password: yup.string().required("密码是必填字段"), // 这里的必填提示与服务器端验证“密码不正确”不同
}).required();

function Login(props) {
  // const { isLoggedIn, setIsLoggedIn } = useAuth(); // 假设有认证状态管理
  const [submissionError, setSubmissionError] = useState(""); // 新增：服务器提交错误状态

  const {
    handleSubmit,
    register,
    formState: { errors },
    setError, // react-hook-form 提供的设置字段错误的方法
  } = useForm({
    resolver: yupResolver(schema),
  });

  const formSubmit = (data) => {
    setSubmissionError(""); // 每次提交前清除之前的服务器错误信息
    fetch("http://localhost:3001/login", {
      method: "POST",
      body: JSON.stringify({ username: data.username, password: data.password }),
      headers: { "Content-Type": "application/json" },
    })
      .then((response) => {
        if (response.status === 200) {
          // 登录成功
          props.router.navigate("/"); // 导航到主页
          // setIsLoggedIn(true); // 更新登录状态
          console.log("登录成功");
          return response.json(); // 解析可能的成功响应数据
        } else {
          // 登录失败，处理服务器错误
          // 尝试解析服务器返回的 JSON 错误信息
          return response.json().then((responseData) => {
            const errorMessage = responseData.error || "用户名或密码不正确。";
            setSubmissionError(errorMessage); // 设置服务器提交错误
            // 如果需要将错误关联到特定字段，可以使用 setError
            // setError("password", { type: "server", message: errorMessage });
            throw new Error(errorMessage); // 抛出错误以便链式调用中断
          }).catch(() => {
            // 如果服务器返回的不是 JSON 或者解析失败
            const genericErrorMessage = "登录失败，请检查您的凭据。";
            setSubmissionError(genericErrorMessage);
            throw new Error(genericErrorMessage);
          });
        }
      })
      .then((responseData) => {
        console.log("登录成功响应数据:", responseData);
      })
      .catch((error) => {
        console.error("登录请求发生错误:", error.message);
        // 这里的 catch 主要捕获网络错误或上面抛出的错误
        if (!submissionError) { // 避免覆盖更具体的服务器错误
            setSubmissionError("网络连接错误，请稍后再试。");
        }
      });
  };

  return (
    <div className="sign-up">
      <h1>登录</h1>
      {submissionError && <p style={{ color: 'red', textAlign: 'center', marginBottom: '15px' }}>{submissionError}</p>}
      <form onSubmit={handleSubmit(formSubmit)}>
        {/* 假设 Input 组件接受 register 和 errorMessage prop */}
        <div>
          <label htmlFor="username">用户名</label>
          <input
            id="username"
            type="text"
            placeholder="输入用户名"
            {...register("username")}
          />
          {errors.username && <p style={{ color: 'red' }}>{errors.username.message}</p>}
        </div>

        <div>
          <label htmlFor="password">密码</label>
          <input
            id="password"
            type="password"
            placeholder="输入密码"
            {...register("password")}
          />
          {errors.password && <p style={{ color: 'red' }}>{errors.password.message}</p>}
        </div>

        <button type="submit">登录</button>
      </form>
      <button className="button-link" onClick={() => props.onFormSwitch && props.onFormSwitch("signup")}>
        没有账户？点击这里注册。
      </button>
    </div>
  );
}

export default withRouter(Login);

登录后复制

5. 注意事项与最佳实践

用户体验至上： 提供清晰、友好的错误提示。避免直接暴露后端错误堆栈或敏感信息。例如，对于登录失败，统一提示“用户名或密码不正确”比区分“用户名不存在”和“密码错误”更安全。
错误清除机制： 在用户重新输入或再次提交表单时，应清除上次的服务器端错误信息，避免旧错误干扰新操作。在formSubmit开始时调用setSubmissionError("")是一个好习惯。
加载状态管理： 在表单提交期间，可以禁用提交按钮并显示加载指示器，防止用户重复提交，提升用户体验。
安全性： 永远不要相信客户端的验证。所有关键业务逻辑和数据完整性验证都必须在服务器端重新执行。
错误位置： 对于整体性的提交错误（如“用户名或密码不正确”），将其显示在表单顶部是合理的。如果服务器错误与特定字段高度相关，react-hook-form的setError方法也可以将服务器错误消息关联到具体的表单字段。
HTTP状态码语义化： 后端应使用恰当的HTTP状态码来表示不同类型的错误（例如，400 Bad Request、401 Unauthorized、403 Forbidden、404 Not Found、500 Internal Server Error），这有助于前端更准确地处理错误。
错误日志： 在catch块中记录错误对于调试和监控至关重要，但不要将敏感信息暴露给用户。