Vereinfachung der Formularvalidierung: React Hook Form im Vergleich zu herkömmlichen Methoden

Die Formularvalidierung ist ein entscheidender Aspekt der Webentwicklung, da sie die Datenintegrität gewährleistet und die Benutzererfahrung verbessert. Im React-Ökosystem haben wir eine bedeutende Entwicklung im Umgang mit Formularen und deren Validierung erlebt.

• In diesem Blog vergleichen wir zwei Ansätze: die traditionelle Formularvalidierung und die moderne React Hook Form-Bibliothek.
• Indem wir diese Methoden nebeneinander untersuchen, werden wir herausfinden, warum React Hook Form für viele Entwickler zu einer Lösung der Wahl geworden ist.

Traditionelle Formvalidierung in React

• Beobachten wir zunächst einen traditionellen Ansatz zur Formularvalidierung in React:

import React, { useState } from "react";

const SimpleForm = () => {

  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    // ... other fields
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

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

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    const newErrors = {};

    // Validation logic
    if (!formData.firstName) newErrors.firstName = "First Name is Required";

    if (!formData.lastName) newErrors.lastName = "Last Name is Required";

    if (!formData.email.match(/^\S+@\S+$/i)) newErrors.email = "Invalid email address";

    if (!formData.password.match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/)) newErrors.password = "Invalid password";

    // ... more validation rules

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    } finally {
      setIsSubmitting(false)
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="firstName"
        value={formData.firstName}
        onChange={handleChange}
      />
      {errors.firstName && <p>{errors.firstName}</p>}

      <input
        name="lastName"
        value={formData.lastName}
        onChange={handleChange}
      />
      {errors.lastName && <p>{errors.lastName}</p>}      

      <input
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      {errors.email && <p>{errors.email}</p>}


      <input
        type="password"
        name="password"
        value={formData.password}
        onChange={handleChange}
      />
      {errors.password && <p>{errors.password}</p>}

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>
    </form>
  );
};

In diesem traditionellen Ansatz

• Wir verwalten den Formularstatus und den Fehlerstatus separat mithilfe des useState-Hooks.
• Wir bearbeiten Änderungen an Formularfeldern manuell und implementieren benutzerdefinierte Validierungslogik in der Funktion handleSubmit.

Das funktioniert zwar, erfordert aber viel Standardcode und kann bei größeren Formularen umständlich werden.

React Hook-Formular eingeben

• Jetzt wollen wir sehen, wie wir mit React Hook Form das gleiche Ergebnis erzielen können:

Installation

npm install react-hook-form

import React from "react";

// useForm is the hook which is given by react-hook-form
import { useForm } from "react-hook-form";

const ReactHookForm = () => {

  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (data) => {
    // Submit form data
    try {
      const response = await simulateApiCall(formData);
      console.log("Success: ", response);
    } catch (error) {
      console.error(error);
      setError({ root: error.message });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("firstName", { required: "First Name is required" 
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}

      <input
        {...register("lastName", { required: "Last Name is required" 
        })}
      />

      {errors.lasttName && <p>{errors.lasttName.message}</p>}      

      <input
        {...register("email", {
          required: "Email is required",
          pattern: { value: /^\S+@\S+$/i, message: "Invalid email address" }
        })}
      />

      {errors.email && <p>{errors.email.message}</p>}

      <input
        {...register("password", { required: "First Name is required",
         pattern: { value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/, message: "Invalid password"}
        })}
      />

      {errors.firstName && <p>{errors.firstName.message}</p>}      

      {/* More form fields */}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? "Submitting..." : "Submit"}
      </button>

    </form>
  );
};

Die Einfachheit der React Hook Form

• Reduzierter Boilerplate: React Hook Form macht eine manuelle Statusverwaltung überflüssig. Kein useState mehr für Formulardaten und Fehler.

• Deklarative Validierung: Anstatt zwingende Validierungslogik zu schreiben, deklarieren wir unsere Validierungsregeln direkt in der Registerfunktion. Dadurch wird der Code besser lesbar und wartbar.

• Automatische Fehlerbehandlung: React Hook Form verfolgt Fehler automatisch und stellt sie über das Fehlerobjekt bereit, sodass keine manuelle Fehlerstatusverwaltung erforderlich ist.

• Leistung: Durch die Nutzung unkontrollierter Komponenten minimiert React Hook Form das erneute Rendern, was zu einer besseren Leistung führt, insbesondere bei großen Formularen.

• Einfache Integration: Die Registerfunktion lässt sich nahtlos in Ihre vorhandenen Eingabeelemente integrieren und erfordert nur minimale Änderungen an Ihrem JSX.

• Eingebaute Validierung: Gängige Validierungsregeln wie erforderlich, Min., Max. und Muster sind integriert, wodurch der Bedarf an benutzerdefinierten Validierungsfunktionen reduziert wird.

• TypeScript-Unterstützung: React Hook Form bietet sofort hervorragende TypeScript-Unterstützung und erhöht so die Typsicherheit in Ihren Formularen.

Um zu verstehen, wie mit React-Hook-Form in Typoskript mit mehr Eingabedateien umgegangen wird

• Während die traditionelle Formularverarbeitung in React Ihnen eine differenzierte Kontrolle bietet, führt sie oft zu ausführlichem Code, der schwer zu pflegen sein kann.

• React Hook Form vereinfacht diesen Prozess erheblich und bietet eine deklarativere und effizientere Möglichkeit, Formulare und deren Validierung zu verarbeiten.

Vielen Dank fürs Lesen ... ich hoffe, Sie haben heute etwas Neues gelernt :)

Das obige ist der detaillierte Inhalt vonVereinfachung der Formularvalidierung: React Hook Form im Vergleich zu herkömmlichen Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!