使用 Yup 簡化 React 中的表單驗證

構(gòu)建 Web 應(yīng)用程序時，表單驗證是確保數(shù)據(jù)完整性的關(guān)鍵。如果您正在尋找一種簡單而強(qiáng)大的方法來驗證 React 中的表單，是的 是您最好的朋友！本博客將引導(dǎo)您完成設(shè)置 Yup 并創(chuàng)建經(jīng)過驗證的精美表單的步驟。

---

你將學(xué)到什么

讀完本博客，您將知道如何：

1. 在 React 中設(shè)置 Yup 進(jìn)行驗證。
2. 構(gòu)建帶有驗證規(guī)則的表單。
3. 使用外部 CSS 設(shè)置表單樣式。

---

先決條件

開始之前，請確保您擁有：

• React 基礎(chǔ)知識。
• Node.js 安裝在您的計算機(jī)上。

---

第 1 步：設(shè)置 是的

首先，在你的 React 項目中安裝 Yup。在終端中運(yùn)行以下命令：

npm install yup

第 2 步：創(chuàng)建表單

這是一個簡單的表單，其中包含姓名和電子郵件字段。我們將使用 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 (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

步驟3：

現(xiàn)在是時候整合了是的。我將創(chuàng)建一個驗證架構(gòu)，然后在提交后檢查表單數(shù)據(jù)。

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 函數(shù)中使用此架構(gòu)來驗證表單

  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 步：設(shè)計表單樣式

為了使表單看起來不錯，請創(chuàng)建一個外部 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 文件導(dǎo)入到您的組件中：

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 (
    <div className="form-container">
      <h1>Simple Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="label">Name:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="input"
          />
          {errors.name && <div className="error">{errors.name}</div>}
        </div>
        <div>
          <label className="label">Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="input"
          />
          {errors.email && <div className="error">{errors.email}</div>}
        </div>
        <button type="submit" className="button">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

結(jié)論

是的，即使沒有 Formik，它也是一個強(qiáng)大的表單驗證工具。只需幾行代碼，您就可以為您的 React 應(yīng)用程序添加強(qiáng)大的驗證。

以上是使用 YUP 進(jìn)行表單驗證的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！