使用 YUP 进行表单验证

使用 Yup 简化 React 中的表单验证

在构建 Web 应用程序时，表单验证是确保数据完整性的关键。如果您正在寻找一种简单而强大的方法来验证 React 中的表单，**Yup** 就是您的最佳选择！本博客将引导您完成设置 Yup 和创建带有验证功能的精致表单的步骤。

您将学到什么

读完本博客后，你将了解如何：

设置 Yup 以在 React 中进行验证。

构建具有验证规则的表单。

使用外部 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();
    // Validation will go here
  };

  return (
    
      
        Name:
        
      
      
        Email:
        
      
      
    
  );
}

export default MyForm;

步骤3：

现在是时候整合 Yup 了。我将创建一个验证架构，然后在提交后检查表单数据。

import * as Yup from "yup"

const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})

我将在“handleSubmit”函数中使用此模式来验证表单

const handleSubmit = (e) => {
    e.preventDefault();
    try {
    await validationSchema.validate(formData, { abortEarly: false });
    setErrors({});
    alert('Form is valid!');
  } 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;
}
.input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}
.error {
  color: red;
  font-size: 12px;
}
.button {
  background: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:hover {
  background: #45a049;
}

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

import './MyForm.css';

完整代码：

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

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

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required!'),
    email: Yup.string().email('Invalid email!').required('Email is required!'),
  });

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

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

  return (
    
      Simple Form
      
        
          Name:
          
          {errors.name && {errors.name}}
        
        
          Email:
          
          {errors.email && {errors.email}}
        
        
      
    
  );
}

export default MyForm;

结论

即使没有 Formik，Yup 也是一款功能强大的表单验证工具。只需几行代码，您就可以为 React 应用添加强大的验证功能。

CLIS.CC