Jeder Webentwickler kennt das Gefühl: Sie haben ein Formular erstellt und stöhnen, als Ihnen klar wird, dass Sie jetzt jedes Feld validieren müssen.

Zum Glück muss die Formularvalidierung nicht schmerzhaft sein. Sie können reguläre Ausdrücke verwenden, um viele allgemeine Validierungsanforderungen zu erfüllen.

Was sind reguläre Ausdrücke?

Reguläre Ausdrücke beschreiben Muster, die mit Kombinationen von Zeichen in Zeichenfolgen übereinstimmen. Sie können sie verwenden, um Konzepte wie „nur Zahlen“ oder „genau fünf Großbuchstaben“ darzustellen.

Reguläre Ausdrücke (auch Regex genannt) sind mächtige Werkzeuge. Sie haben viele Verwendungsmöglichkeiten, darunter erweiterte Such-, Suchen-und-Ersetzen- und Validierungsoperationen für Zeichenfolgen. Eine berühmte Anwendung regulärer Ausdrücke ist den grep-Befehl unter Linux.

Warum reguläre Ausdrücke zur Validierung verwenden?

Es gibt viele Möglichkeiten, Formulareingaben zu validieren, aber reguläre Ausdrücke sind einfach, schnell und bequem zu verwenden, wenn Sie verstehen, wie.

instagram viewer

JavaScript bietet native Unterstützung für reguläre Ausdrücke. Das bedeutet, dass die Verwendung zur Validierung im Gegensatz zu einer externen Bibliothek dazu beiträgt, die Größe Ihrer Webanwendung so gering wie möglich zu halten.

Reguläre Ausdrücke sind auch in der Lage, viele Arten von Formulareingaben zu validieren.

Grundlagen regulärer Ausdrücke

Reguläre Ausdrücke bestehen aus Symbolen, die Muster beschreiben, die durch Zeichen in einer Zeichenfolge gebildet werden. In JavaScript können Sie ein Literal für reguläre Ausdrücke erstellen, indem Sie es zwischen zwei Schrägstriche schreiben. Die einfachste Form eines regulären Ausdrucks sieht so aus:

/abc/

Der obige reguläre Ausdruck stimmt mit jeder Zeichenfolge überein, die die Zeichen "a", "b" und "c" in dieser Reihenfolge nacheinander enthält. Die Zeichenfolge „abc“ passt zu diesem regulären Ausdruck, ebenso wie eine Zeichenfolge wie „abcdef“.

Sie können komplexere Muster beschreiben, indem Sie Sonderzeichen in Ihren regulären Ausdrücken verwenden. Sonderzeichen stellen kein wörtliches Zeichen dar, aber sie machen Ihre Regex ausdrucksstärker.

Sie können sie verwenden, um anzugeben, dass ein Teil des Musters eine bestimmte Anzahl von Malen wiederholt werden soll, oder um anzuzeigen, dass ein Teil des Musters optional ist.

Ein Beispiel für ein Sonderzeichen ist "*". Das Zeichen „*“ ändert entweder ein einzelnes Zeichen oder eine Gruppe von Zeichen, die davor stehen. Es erklärt, dass diese Zeichen fehlen oder sich beliebig oft hintereinander wiederholen können. Zum Beispiel:

/abc*/

Entspricht „ab“, gefolgt von einer beliebigen Anzahl von „c“-Zeichen. Die Zeichenfolge "ab" ist ein gültiges Beispiel für dieses Muster, da das Zeichen "c" optional ist. Die Zeichenfolgen „abc“ und „abccccc“ sind gleichermaßen gültig, da das „*“ bedeutet, dass sich „c“ beliebig oft wiederholen kann.

Die vollständige Regex-Syntax verwendet einige weitere Musterzeichen, um mögliche Übereinstimmungen zu beschreiben. Sie können mehr von lernen Regex 101 von regexlearn.com interaktiver Kurs. JavaScript-Leitfaden von MDN ist auch sehr nützlich.

Formularvalidierung mit regulären Ausdrücken

Sie können Regex verwenden, um Formulareingaben auf verschiedene Arten zu validieren. Die erste Möglichkeit ist die Verwendung von JavaScript. Es umfasst einige Schritte:

  1. Holen Sie sich den Wert der Formulareingabe.
  2. Überprüfen Sie, ob der Wert der Eingabe mit dem regulären Ausdruck übereinstimmt.
  3. Wenn dies nicht der Fall ist, dem Benutzer der Website anzeigen, dass der Wert des Eingabefelds ungültig ist.

Hier ist ein kurzes Beispiel. Bei einem Eingabefeld wie diesem:

<Eingabeplatzhalter="Eingabefeld">

Sie können eine Funktion schreiben, um sie wie folgt zu validieren:

Funktionbestätigen() {
Lassen Wert = dokumentieren.querySelector("Eingabe").Wert;
konst regEx = /^.{3,7}$/;
Rückkehr regEx.test (Wert);
}

Eine andere Möglichkeit besteht darin, die HTML-Formularvalidierungsfunktionen des Browsers zu nutzen. Wie? Durch Angabe von Regex als Wert des Musterattributs des HTML-Eingabetags.

Das Musterattribut ist nur für die folgenden Eingabetypen gültig: Text, Tel, E-Mail, URL, Passwort und Suche.

Hier ist ein Beispiel für die Verwendung des Musterattributs:

<bilden>
<Eingabeplatzhalter="Eingabefeld" erforderliches Muster="/^.{3,7}$/">
<Taste>Einreichen</button>
</form>

Wenn Sie das Formular senden und der Wert der Eingabe nicht mit der gesamten Regex übereinstimmt, zeigt das Formular einen Standardfehler an, der wie folgt aussieht:

Wenn der für das Musterattribut bereitgestellte reguläre Ausdruck ungültig ist, ignoriert der Browser das Attribut.

Gängige Regex-Muster für die Formularvalidierung

Das Erstellen und Debuggen von Regex von Grund auf kann einige Zeit in Anspruch nehmen. Hier sind einige Regex-Anweisungen, die Sie verwenden können, um einige der häufigsten Arten von Formulardaten zu validieren.

Regulärer Ausdruck zum Überprüfen der Zeichenfolgenlänge

Eine der häufigsten Validierungsanforderungen ist eine Beschränkung der Länge einer Zeichenfolge. Der reguläre Ausdruck, der mit einer siebenstelligen Zeichenfolge übereinstimmt, lautet:

/^.{7}$/

Das "." ist ein Platzhalter, der mit einem beliebigen Zeichen übereinstimmt, und die „7“ in geschweiften Klammern gibt die Längenbegrenzung der Zeichenfolge an. Wenn die Zeichenfolge innerhalb eines bestimmten Längenbereichs liegen muss, z. B. zwischen drei und sieben, würde der reguläre Ausdruck stattdessen so aussehen:

/^.{3,7}$/

Und wenn die Zeichenfolge mindestens drei Zeichen lang sein müsste, ohne Obergrenze, würde sie so aussehen:

/^.{3,}$/

Es ist unwahrscheinlich, dass die Länge die einzige Validierungsanforderung für eine Formulareingabe ist. Aber Sie werden es oft als Teil eines komplizierteren regulären Ausdrucks verwenden, der andere Bedingungen enthält.

Regulärer Ausdruck zum Validieren von Nur-Buchstaben-Feldern

Einige Formulareingaben müssen nur Buchstaben enthalten, um gültig zu sein. Der folgende reguläre Ausdruck passt nur auf solche Zeichenfolgen:

/^[a-zA-Z]+$/

Dieser reguläre Ausdruck gibt einen Zeichensatz an, der aus dem gesamten Alphabet besteht. Das Sonderzeichen „+“ bedeutet, dass das vorangestellte Zeichen mindestens einmal vorkommen muss, ohne Obergrenze.

Regulärer Ausdruck zur Validierung reiner Zahlenfelder

Der folgende reguläre Ausdruck stimmt nur mit Zeichenfolgen überein, die vollständig aus Ziffern bestehen:

/^\d+$/

Der obige reguläre Ausdruck ist im Wesentlichen derselbe wie der vorherige. Der einzige Unterschied besteht darin, dass ein Sonderzeichen "\d" verwendet wird, um den Ziffernbereich darzustellen, anstatt sie auszuschreiben.

Regulärer Ausdruck zur Validierung alphanumerischer Felder

Reguläre Ausdrücke erleichtern auch die Validierung alphanumerischer Felder. Hier ist ein regulärer Ausdruck, der nur Zeichenfolgen findet, die aus Buchstaben und Ziffern bestehen:

/^[a-zA-Z\d]+$/

Einige Felder sind alphanumerisch, erlauben aber einige andere Zeichen wie Bindestriche und Unterstriche. Ein Beispiel für solche Felder ist ein Benutzername. Unten sehen Sie einen regulären Ausdruck, der mit einer Zeichenfolge übereinstimmt, die aus Buchstaben, Ziffern, Unterstrichen und Bindestrichen besteht:

/^(\w|-)+$/

Das Sonderzeichen "\w" entspricht einer ganzen Klasse von Zeichen, ebenso wie "\d". Es stellt den Bereich des Alphabets, der Ziffern und des Unterstrichs ("_") dar.

Regulärer Ausdruck zur Validierung von Telefonnummern

Die Validierung einer Telefonnummer kann ein kompliziertes Feld sein, da verschiedene Länder unterschiedliche Formate verwenden. Ein sehr allgemeiner Ansatz besteht darin, sicherzustellen, dass die Zeichenfolge nur Ziffern enthält und dass ihre Länge innerhalb eines bestimmten Bereichs liegt:

/^\d{9,15}$/

Ein ausgefeilterer Ansatz könnte wie dieser aus aussehen MDN, das Telefonnummern im Format ###-###-#### validiert:

/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/

Regulärer Ausdruck zum Validieren von Daten

Wie Telefonnummern können auch Datumsangaben mehrere Formate haben. Daten sind in der Regel weniger kompliziert zu validieren als Telefonnummern. Wieso den? Datumsangaben enthalten keine anderen Zeichen als Ziffern und Bindestriche.

Hier ist ein Beispiel, das Datumsangaben im Format "TT-MM-JJJJ" validiert.

/^\d{2}-\d{2}-\d{4}$/

Die Validierung mit Regex ist einfach

Reguläre Ausdrücke beschreiben Muster, die mit Kombinationen von Zeichen in Zeichenfolgen übereinstimmen. Sie haben eine Vielzahl von Anwendungen, z. B. die Validierung von Benutzereingaben aus HTML-Formularen.

Sie können Regex verwenden, um mit JavaScript oder über das HTML-Musterattribut zu validieren. Es ist einfach, reguläre Ausdrücke zu erstellen, um gängige Arten von Formulareingaben wie Datumsangaben und Benutzernamen zu validieren.