Formularvalidierung mit YUP

Vereinfachen Sie Ihre Formularvalidierung in React mit Yup

Beim Erstellen von Webanwendungen ist die Formularvalidierung der Schlüssel zur Gewährleistung der Datenintegrität. Wenn Sie nach einer einfachen, aber leistungsstarken Möglichkeit suchen, Formulare in React zu validieren, ist Yup Ihr bester Freund! Dieser Blog führt Sie durch die Schritte zum Einrichten von Yup und zum Erstellen eines ausgefeilten Formulars mit Validierung.

---

Was Sie lernen werden

Am Ende dieses Blogs wissen Sie, wie man:

1. Richten Sie Yup für die Validierung in React ein.
2. Erstellen Sie ein Formular mit Validierungsregeln.
3. Gestalten Sie Ihr Formular mit externem CSS.

---

Voraussetzungen

Bevor Sie eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

• Grundkenntnisse von React.
• Node.js ist auf Ihrem Computer installiert.

---

Schritt 1: Einrichten Ja

Installieren Sie zunächst Yup in Ihrem React-Projekt. Führen Sie den folgenden Befehl in Ihrem Terminal aus:

npm install yup

Schritt 2: Erstellen des Formulars

Hier ist ein einfaches Formular mit Feldern für einen Namen und eine E-Mail-Adresse. Wir verwenden den useState von React, um Eingabewerte und Fehler zu verwalten.

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;

Schritt 3:

Jetzt ist es Zeit zu integrieren. Ja. Ich werde ein Validierungsschema erstellen und dann die Formulardaten nach dem Absenden überprüfen.

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')
})

Ich verwende dieses Schema in der handleSubmit-Funktion, um das Formular zu validieren

  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);
  }
  };

Schritt 4: Gestalten Sie das Formular

Damit das Formular gut aussieht, erstellen Sie eine externe CSS-Datei (MyForm.css) und fügen Sie diese Stile hinzu:

.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;
}

Importieren Sie die CSS-Datei in Ihre Komponente:

import './MyForm.css';

Vollständiger Code:

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;

Abschluss

Ja, es ist ein leistungsstarkes Tool zur Formularvalidierung, auch ohne Formik. Mit nur wenigen Codezeilen können Sie Ihren React-Apps eine robuste Validierung hinzufügen.

Das obige ist der detaillierte Inhalt vonFormularvalidierung mit YUP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!