Formulare mit regulären Ausdrücken validierenFormular-Prüfung

Fehlersuche

Formulare mit regulären Ausdrücken validieren

Formulare auf Webseiten werden oft aus Versehen nicht richtig ausgefüllt. Die Folge davon sind E-Mail-Adressen, die keine Mail-Zustellung erlauben, Verzögerungen bei der Bestellung und andere Unannehmlichkeiten für beide Seiten.

Es liegt daher sowohl im Interesse der Anwender als auch der Betreiber von Websites, dass korrekte Angaben gemacht werden. Mit einer Überprüfung Ihrer Formulare schon auf Seiten des Clients ersparen Sie dem Anwender unnötige Wartezeiten, weil die Prüfung direkt vom Browser durchgeführt wird.

Die professionelle Lösung dafür sind reguläre Ausdrücke. Sie stammen aus der Unix-Welt und sind ein mächtiges Werkzeug zur Mustererkennung und Validierung von Benutzereingaben. Ab Javascript 1.2 beherrschen die Browser einen Großteil davon.

Dieser Workshop vermittelt Ihnen den grundlegenden Einsatz von regulären Ausdrücken. Anschließend wird erläutert, wie Sie diese in der Praxis zur Validierung von Formularen nutzen können. Dabei sollten Sie aber stets bedenken, dass jegliche Formular-Überprüfung zwar vor Irrtümern bei der Eingabe schützen kann, aber nicht vor bewusst falschen Angaben. Eine Prüfung kann daher nur die Absicht verfolgen, versehentliche Fehler auszuschließen.

RegExp definieren

Formulare mit regulären Ausdrücken validieren

Mit Hilfe von regulären Ausdrücken können Sie rasch nach Textpassagen suchen, die einem bestimmten Muster entsprechen. Weil sich mit vielen Kürzeln größere Zeichenmengen zusammenfassen lassen, ist wenig Code erforderlich. Reguläre Ausdrücke sind auf zwei Arten definierbar:

pattern = new RegExp(“^r”);
pattern = /^r/;

In beiden Fällen wird dasselbe RegExp-Objekt erstellt und in der Variablen pattern gespeichert. Es ist unwesentlich, auf welche Art Sie das Muster definieren. Die eigentliche Schwierigkeit liegt in der Syntax von regulären Ausdrücken, die auf den ersten Blick ziemlich kryptisch aussieht. Wenn Sie jedoch einmal damit vertraut sind, können Sie sie in nahezu allen Programmiersprachen anwenden.

Eine Reihe von Zeichen, auch Metazeichen genannt, haben eine besondere Bedeutung:

( ) [ ] { } ^ $ . * + ? | \ / = : !

Wenn Sie nach einem dieser Zeichen suchen, müssen Sie es maskieren, das heißt einen umgekehrten Schrägstrich (Backslash) voranstellen. Um etwa nach dem Backslash selbst zu suchen, notieren Sie daher: \\. Es gibt jedoch eine Ausnahme von dieser Regel, und zwar dann, wenn die Metazeichen innerhalb einer Bereichsangabe (also zwischen eckigen Klammern) auftreten. In diesem Fall muss kein Backslash vorangestellt werden.

Metazeichen dienen in der Hauptsache als Operatoren, mit denen Sie nach bestimmten Zeichen oder Zeichenmengen suchen können. Die im Kasten »Grundelemente« auf der folgenden Seite dargestellten Grundelemente der regulären Ausdrücke werden daher nun an einigen Beispielen erläutert.

Suchmuster

Formulare mit regulären Ausdrücken validieren

Der Punkt . passt auf jedes beliebige Zeichen, und zwar genau auf eins. So findet der Ausdruck w.rt etwa die Textstellen »wirt«, »wert«, »wort«, »w2rt«, aber nicht »wrt«. Der senkrechte Strich | ? auch Pipe genannt ? ist ein ODER-Operator. Er sucht, ob entweder sein linker oder rechter Operand vorkommt. Den Ausdruck H(u|ir)t verwenden Sie beispielsweise, um die Textstellen »Hut« oder »Hirt« zu finden.

Sehr wichtig sind die Zeichen ^ und $, die für den Anfang und das Ende einer Zeile stehen. Der Ausdruck ^abc findet den Text »abc« also nur dann, wenn er am Anfang einer Zeile auftritt. xyz$ dagegen findet die Stelle »xyz« nur, wenn sie das Ende einer Zeile bildet. Der reguläre Ausdruck ^abz$ findet jede Zeile, die ausschließlich die Textstelle »abz« enthält.

Um nach mehreren Zeichen gleichzeitig zu suchen, verwenden Sie die eckigen Klammern. So findet beispielsweise der Ausdruck [abcd] die einzelnen Zeichen »a«, »b«, »c« oder »d«. Sie können einen Bindestrich notieren, um einen ganzen Bereich anzugeben: [0-9] findet daher einzelne Ziffern. Der Bereich innerhalb der eckigen Klammer lässt sich auch mit einfachen Aufzählungen einzelner Zeichen kombinieren. [a-zA-Z0-9+-] findet dann einen Groß- oder einen Kleinbuchstaben, eine Ziffer oder eines der Zeichen + oder -.

Wenn Sie einen Bindestrich in die Zeichenmenge aufnehmen wollen, muss er das erste oder letzte Zeichen in der Menge sein, weil er sonst als Bereichsangabe (von ? bis) interpretiert werden würde.

Mit dem Zeichen ^ lässt sich eine gesamte Bereichsangabe verneinen. Ist also das erste Zeichen nach der zu öffnenden eckigen Klammer ein Caret ^, dann wird jedes Zeichen gefunden, das nicht in der angegebenen Menge enthalten ist.

Wiederholungen

Formulare mit regulären Ausdrücken validieren

Mit Wiederholungsoperatoren bestimmen Sie die gewünschte Anzahl der festgelegten Zeichen. Der Ausdruck ^.{6}$ findet etwa jede Zeile, die aus genau sechs beliebigen Zeichen besteht. \d{3,5} sucht nach allen drei- bis fünfstelligen Zahlen. Für einige häufig verwendete Wiederholungen gibt es Abkürzungen: das Plus-Zeichen, Sternchen und Fragezeichen.

Musik\w+ findet »Musikverlag«, »Musiker«, »Musikschule« und so weiter, aber nicht »Musik«. Der Ausdruck Musik\w* passt hingegen auf dieselben Treffer und schließt auch das Wort Musik selbst ein, da das Sternchen die vorhergehende Stelle entweder gar nicht oder beliebig oft findet. Ähnlich wie * und + funktioniert das Fragezeichen. Es sucht aber nur danach, ob das vorausgehende Muster einmal oder keinmal vorkommt. So findet zum Beispiel der Ausdruck M[ae][iy]e?r die Textstellen »Mayer«, »Meier«, »Maier«, »Meyer«, »Mayr«, »Meyr«, »Mair«, »Meir« und nichts anderes.

Namen- und Ortsangaben

Formulare mit regulären Ausdrücken validieren

Mit diesen Grundlagen lassen sich nun die regulären Ausdrücke für die einzelnen Formular-Felder festlegen.

Zunächst das Muster für Namens- und Ortsangaben:

name_pattern = /^[a-zA-ZäöüÄÖÜ] [.a-zA-ZäöüÄÖÜß -]+$/;

Durch das Caret ^ am Beginn und das $-Zeichen am Schluss des gesamten Ausdrucks wird die gesamte Eingabe-Zeile von vorn bis hinten durchsucht. Weil der Ausdruck aus zwei Bereichsangaben besteht, sind mindestens zwei Zeichen erforderlich. Der erste Bereich bezieht sich nur auf das erste erlaubte Zeichen. Dieses muss unbedingt ein Buchstabe aus dem deutschen Alphabet sein. Weil sich hierbei nicht unbedingt jeder an die Großschreibung hält, sollen auch Kleinbuchstaben erlaubt sein.

In der zweiten Bereichsangabe werden noch einige Zeichen zusätzlich gesucht. Da es auch Doppel-Namen gibt und der Vorname häufig mit einem Punkt abgekürzt wird, sind dann auch Punkte, Leerstellen und Bindestriche gestattet. Wegen des Plus-Zeichens hinter dem zweiten Bereich muss eines dieser Zeichen mindestens einmal oder mehrmals enthalten sein.

Postleitzahlen

Formulare mit regulären Ausdrücken validieren

Sehr kurz und einfach zu überprüfen sind Postleitzahlen:

zip_pattern = /^\d{4,}$/;

Dieses Muster findet in der gesamten Zeile mindestens vier Ziffern und nichts anderes. Wird ein anderes Zeichen eingegeben, ist die Eingabe ungültig. Bedenken Sie, dass Postleitzahlen nicht in jedem Fall fünfstellig sein sollten, weil damit Österreich und die Schweiz ausgeschlossen werden. Damit nicht beliebig viele Zeichen eingegeben werden können, begrenzen Sie mit dem Attribut
maxlength im HTML-Bereich das Eingabefeld auf fünf Zeichen.

Telefon-Nummern

Formulare mit regulären Ausdrücken validieren

Bei der Validierung von Telefonnummern sollten Sie etwas weniger restriktiv vorgehen, weil diese auch gern von den Anwendern mit Bindestrichen, unterschiedlichen Klammern und Leerstellen angegeben werden:

phone_pattern = /^[0-9()\[\]\/ +-] *\d{2,}[0-9()\[\]\/ -]*$/;

Infolge der zusätzlich erlaubten Zeichen können Sie nicht einfach auf einen numerischen Wert überprüfen.

Notieren Sie daher wieder Bereichsangaben, in denen die erlaubten Zeichen mit eingeschlossen sind. In diesem Fall sind das auf jeden Fall runde und eckige Klammern, der Schrägstrich, die Leerstelle sowie das Plus- und Minus-Zeichen.

Das Sternchen * hinter den beiden Bereichsangaben kennen Sie bereits. Durch den Ausdruck \d gefolgt von dem Wiederholungsoperator ist mindestens die Eingabe einer zweistelligen Ziffer erforderlich.

E-Mail-Adressen

Formulare mit regulären Ausdrücken validieren

Zur exakten Validierung von E-Mail-Adressen kursieren im Internet eine ganze Reihe unterschiedlicher Muster. Um den regulären Ausdruck nicht zu langatmig zu gestalten, beschränkt sich der Workshop hier auf die wesentlichen Bestandteile einer E-Mail-Adresse:

email_pattern = /^[a-zA-Z0-9_.+-] +@[^@]+[^@.]\.[a-zA-Z]{2,}$/;

Wesentlich ist zunächst natürlich der Klammeraffe, der nur einmal vorkommen darf. Links davon dürfen Buchstaben, Ziffern, Punkte, der Unterstrich, das Plus-Zeichen und der Bindestrich angegeben werden. Deutsche Umlaute und Leerstellen sind hier jedoch nicht erlaubt. Unmittelbar hinter dem Klammeraffen sind wenigstens zwei weitere Zeichen erforderlich. Außerdem müssen danach ein Punkt und dahinter mindestens zwei weitere Buchstaben erscheinen, die für die minimale Länge einer Top-Level-Domain stehen.

Der Ausdruck ist natürlich nicht perfekt, aber für die Praxis im Internet gut zu gebrauchen, weil er die meisten möglichen Fehler abfängt.

Test-Methode

Formulare mit regulären Ausdrücken validieren

Um die definierten Muster auf die Formular-Eingabe anzuwenden, müssen Sie nur noch die im Formular eingegebenen Zeichen der RegExp-Methode test() übergeben. Diese ermittelt, ob ein regulärer Ausdruck zu Suchtreffern führt oder nicht. Wird etwas gefunden, dann ist die Benutzereingabe korrekt. In diesem Fall gibt die Methode true zurück, ansonsten false.

Auf der Heft-CD und unter
listings.internet-pro.de finden Sie Beispieldateien mit mehreren Möglichkeiten, wie Sie die Fehlermeldungen gestalten können. In diesem Artikel können natürlich nicht alle Aspekte der regulären Ausdrücke und Formular-Validierung erläutert werden.