标签导航：

使用 yup 进行表单验证

使用Yup简化React表单验证

构建Web应用时，表单验证是确保数据完整性的关键步骤。如果您正在寻找一种简单而有效的方法来验证React表单，那么Yup是您的理想选择！本教程将指导您如何设置Yup，并创建一个经过良好验证的表单。

您将学到什么

阅读本教程后，您将掌握以下技能：

  1. 在React项目中配置Yup进行表单验证。
  2. 创建包含验证规则的表单。
  3. 使用外部CSS样式表美化表单。

先决条件

开始之前，请确保您具备以下条件：

  • React基础知识。
  • Node.js已安装在您的计算机上。

步骤1：安装Yup

首先，在您的React项目中安装Yup。在终端中运行以下命令：

npm install yup

步骤2：创建表单

以下是一个简单的表单，包含姓名和邮箱字段。我们将使用React的useState来管理输入值和错误信息。

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 验证逻辑将在此处添加
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>姓名:</label>
        <input name="name" onChange={handleChange} type="text" value={formData.name} />
      </div>
      <div>
        <label>邮箱:</label>
        <input name="email" onChange={handleChange} type="email" value={formData.email} />
      </div>
      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

步骤3：添加Yup验证

现在，我们将集成Yup。我们将创建一个验证模式，并在提交表单后使用它来检查数据。

import * as Yup from "yup";

const validationSchema = Yup.object({
  name: Yup.string().required('姓名必填!'),
  email: Yup.string().email('无效的邮箱地址').required('邮箱必填!'),
});

我们将使用此模式在handleSubmit函数中验证表单：

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      alert('表单有效!');
    } catch (err) {
      const newErrors = {};
      err.inner.forEach((error) => {
        newErrors[error.path] = error.message;
      });
      setErrors(newErrors);
    }
  };

步骤4：样式设置

为了让表单更美观，创建一个外部CSS文件 (例如MyForm.css) 并添加以下样式：

.form-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.label {
  font-weight: bold;
  display: block; /* 使标签占据一行 */
  margin-bottom: 5px;
}

.input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* 包含内边距和边框 */
}

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
}

.button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}

将CSS文件导入到您的组件中：

import './MyForm.css';

完整代码：

import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';

function MyForm() {
  // ... (useState, handleChange, handleSubmit 与之前相同)

  return (
    <div className="form-container">
      <h1>简单表单</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="label">姓名:</label>
          <input className="input" name="name" onChange={handleChange} type="text" value={formData.name} />
          {errors.name && <div className="error">{errors.name}</div>}
        </div>
        <div>
          <label className="label">邮箱:</label>
          <input className="input" name="email" onChange={handleChange} type="email" value={formData.email} />
          {errors.email && <div className="error">{errors.email}</div>}
        </div>
        <button className="button" type="submit">提交</button>
      </form>
    </div>
  );
}

export default MyForm;

结论

Yup是一个功能强大的表单验证工具，即使不使用Formik也能轻松实现。只需几行代码，即可为您的React应用程序添加强大的验证功能。 本示例展示了基本的验证，您可以根据需求添加更多复杂的验证规则。