Haben Sie jemals versucht, ein Formular abzusenden, nur damit die Webseite Ihnen eine Fehlermeldung anzeigt, dass eines oder mehrere der Felder ungültig sind? Wenn ja, dann haben Sie Formularvalidierung erlebt.
Die Validierung ist oft unerlässlich, um saubere, nutzbare Daten zu erhalten. Von E-Mail-Adressen bis hin zu Daten, wenn es genau sein muss, müssen Sie es sorgfältig überprüfen.
Was ist Formularvalidierung?
Bei der Formularvalidierung wird sichergestellt, dass die von einem Benutzer in ein Formular eingegebenen Daten korrekt und vollständig sind. Sie können dies auf der Clientseite tun, indem Sie integrierte HTML-Funktionen wie das erforderliche Attribut verwenden. Du kannst auch auf dem Client mit JavaScript validieren, und es gibt externe Next.js-Bibliotheken, um den Prozess zu vereinfachen.
Es gibt mehrere Gründe, warum die Formularvalidierung unerlässlich ist. Erstens hilft es sicherzustellen, dass die in ein Formular eingegebenen Daten vollständig und korrekt sind. Dies ist wichtig, da es hilft, Fehler zu vermeiden, wenn Ihre App Daten an einen Server oder eine Datenbank übermittelt.
Zweitens kann die Formularvalidierung dazu beitragen, die Benutzerfreundlichkeit eines Formulars zu verbessern, indem Feedback gegeben wird, wenn ein Benutzer ungültige Daten eingibt. Dies kann dazu beitragen, Frustration und Verwirrung seitens des Benutzers zu vermeiden.
Schließlich kann die Formularvalidierung dazu beitragen, die Sicherheit eines Formulars zu verbessern, indem sichergestellt wird, dass nur gültige Daten übermittelt werden.
So validieren Sie Formulare in Next.js
Es gibt zwei Möglichkeiten, Formulare in Next.js zu validieren: mit den integrierten Methoden oder mit externen Bibliotheken.
Verwenden der integrierten Methoden
HTML bietet mehrere Methoden zur Validierung von Formularen, von denen die gebräuchlichste die ist erforderlich Attribut. Dadurch wird sichergestellt, dass ein Feld nicht leer sein kann. Sie können diese Methode von Ihrer Next.js-App aus verwenden, indem Sie einfach das Attribut in die von Ihnen generierten Eingabe-Tags einfügen. HTML bietet auch eine Muster Attribut. Sie können dies zusammen mit a verwenden regulärer Ausdruck für komplexere Validierung.
Dieses Beispiel enthält ein Formular mit zwei Feldern: Name und E-Mail. Das Namensfeld ist erforderlich und das E-Mail-Feld muss mit einem regulären Ausdruck übereinstimmen.
importieren Reagieren aus 'reagieren'KlasseMeinFormularerweitertReagieren.Komponente{
rendern() {
zurückkehren (
<form >
<Etikett>
Name:
<Eingabetyp="Text" name="Name" erforderlich />
</label>
<Etikett>
Email:
<Eingabetyp="Email" name="Email"
Muster="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<Eingabetyp="einreichen" wert="Einreichen" />
</form>
)
}
}
ExportStandard MeinFormular
Dieser Code importiert die React-Bibliothek, erstellt dann eine Klasse namens MyForm und rendert ein Formularelement. Innerhalb des Form-Elements gibt es zwei Label-Elemente.
Das erste Beschriftungselement enthält ein erforderliches Texteingabefeld. Das zweite Label-Element enthält ein E-Mail-Eingabefeld mit einem regulären Ausdruck in seinem Musterattribut.
Schließlich haben Sie einen Submit-Button. Wenn ein Benutzer das Formular absendet, stellt das erforderliche Attribut sicher, dass er das Namensfeld ausgefüllt hat. Das Musterattribut des E-Mail-Felds stellt sicher, dass die E-Mail das angegebene Format hat. Wenn eine dieser Bedingungen fehlschlägt, wird das Formular nicht gesendet.
Die Verwendung der integrierten Methoden hat einige Nachteile. Erstens kann es schwierig sein, den Überblick über all die verschiedenen Validierungsregeln zu behalten, die Sie eingerichtet haben. Zweitens kann es bei vielen Feldern mühsam sein, jedem das erforderliche Attribut hinzuzufügen. Schließlich bieten die integrierten Methoden nur eine grundlegende Validierung. Wenn Sie eine komplexere Validierung durchführen möchten, müssen Sie eine externe Bibliothek verwenden.
Verwenden einer externen Bibliothek
Neben den integrierten Methoden gibt es auch viele externe Bibliotheken, die Sie zum Validieren von Formularen verwenden können. Einige beliebte Bibliotheken sind Formik, React-Hook-Form und Yup.
Um eine externe Bibliothek zu verwenden, müssen Sie diese zunächst installieren. Um beispielsweise Formik zu installieren, führen Sie den folgenden Befehl aus:
npm Installieren formikSobald Sie die Bibliothek installiert haben, können Sie sie in Ihre Komponente importieren und damit Ihr Formular validieren:
importieren Reagieren aus 'reagieren'
importieren { Formik, Formular, Feld } aus 'Formik'konst MeinFormular = () => (
<Formik
initialValues={{ Name: '', Email: '' }}
validate={Werte=> {
konst Fehler = {}
Wenn (!Werte.Name) {
fehler.name = 'Erforderlich'
}
Wenn (!Werte.Email) {
error.email = 'Erforderlich'
} andersWenn (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (Werte.E-Mail)
) {
error.email = 'Ungültige E-Mail-Adresse'
}
zurückkehren Fehler
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
Alarm(JSON.stringify (Werte, Null, 2))
setSubmitting(FALSCH)
}, 400)
}}
>
{({wird eingereicht}) => (
<Form>
<Feldtyp="Text" name="Name" />
<Feldtyp="Email" name="Email" />
<Schaltflächentyp="einreichen" deaktiviert={isSubmitting}>
Einreichen
</button>
</Form>
)}
</Formik>
)
ExportStandard MeinFormular
Hier importieren Sie zunächst die Formik, Form, Und Feld Komponenten aus der Formik-Bibliothek. Als nächstes erstellen Sie eine Komponente namens MyForm. Diese Komponente rendert ein Formular mit zwei Feldern: Name und E-Mail.
Die Eigenschaft initialValues setzt die Anfangswerte der Formularfelder. In diesem Fall sind sowohl der Name als auch die E-Mail-Felder leere Zeichenfolgen.
Die Validate-Prop legt die Validierungsregeln für die Formularfelder fest. In diesem Fall ist das Namensfeld erforderlich und das E-Mail-Feld sollte mit einem regulären Ausdruck übereinstimmen.
Die onSubmit-Prop legt die Funktion fest, die React aufruft, wenn der Benutzer das Formular absendet. In diesem Fall ist die Funktion eine Warnung, die die Werte der Formularfelder anzeigt.
Die Eigenschaft isSubmitting bestimmt, ob das Formular gerade gesendet wird. In diesem Fall setzen Sie es auf false.
Rendern Sie schließlich das Formular mit der Form-Komponente von Formik.
Vorteile der Verwendung externer Bibliotheken in Next.js
Die Verwendung einer externen Bibliothek wie Formik zum Validieren von Formularen in Next.js bietet mehrere Vorteile. Ein Vorteil ist, dass es viel einfacher ist, Fehlermeldungen für den Benutzer anzuzeigen. Wenn beispielsweise ein erforderliches Feld nicht ausgefüllt ist, zeigt Formik automatisch eine Fehlermeldung mit einem Lösungsvorschlag an.
Ein weiterer Vorteil besteht darin, dass Formik komplexere Validierungsregeln handhaben kann. Beispielsweise können Sie Formik verwenden, um zu überprüfen, ob zwei Felder identisch sind (z. B. ein Kennwort- und ein Kennwortbestätigungsfeld).
Schließlich macht es Formik einfach, die Formulardaten an einen Server zu senden. Beispielsweise können Sie Formik verwenden, um die Formulardaten an eine API zu senden.
Steigern Sie das Benutzerengagement mithilfe von Formularen
Sie können Formulare verwenden, um die Benutzerinteraktion zu erhöhen. Indem Sie Feedback geben, wenn ein Benutzer ungültige Daten eingibt, können Sie dazu beitragen, Frustration und Verwirrung zu vermeiden.
Mithilfe externer Bibliotheken können Sie Funktionen wie automatische Vervollständigung und bedingte Felder hinzufügen. Diese können dazu beitragen, Ihre Formulare noch benutzerfreundlicher zu gestalten. Bei korrekter Verwendung können Formulare ein leistungsstarkes Tool sein, mit dem Sie die Benutzerinteraktion steigern und die benötigten Daten sammeln können.
Neben der Validierung verfügt Next.js über viele Funktionen, mit denen Sie die Benutzerinteraktion steigern können.