从现在开始，努力学习吧！本文《使用 YUP 进行表单验证》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

使用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 (
    

      

        姓名:
        
      
      

        邮箱:
        
      
      提交
    
  );
}

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 (
    

      
简单表单
      

        

          姓名:
          
          {errors.name && 
{errors.name}
}
        
        

          邮箱:
          
          {errors.email && 
{errors.email}
}
        
        提交
      
    
  );
}

export default MyForm;

结论

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

以上就是《使用 YUP 进行表单验证》的详细内容，更多关于的资料请关注golang学习网公众号！