RegEx-Basics zur Formularvalidierung

Nach ein paar Tagen des Arbeitens mit RegEx juckt es mich in den Fingern ein Quiz zu kreieren bei welchem es zu bestimmen gilt, ob eine Zeichenfolge aus komplett zufällig zusammengewürfelten Zeichen besteht oder ob es sich um eine Regular Expression, kurz RegEx handelt...

Wer mit Bootstrap arbeitet bleibt wohl vom Schlimmsten verschont, wenn es darum geht, Eingaben nicht nur nach Art der Zeichen zu prüfen, sondern auch deren Struktur. Hier zum Beispiel ein "stark vereinfachter" RegEx-Ausdruck zur Validierung einer E-Mail-Adresse:

/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/

Was aber auch mit Bootstrap durchaus noch notwendig ist, ist das Validieren der zahlreichen Textfelder. Wäre schon gut, wenn Tags nicht mit Prozentzeichen und Co. gespickt wären, wenn hingegen an anderen Orten solche Zeichen ein absolutes Muss sind.

Die Grundstruktur eines durchaus praktikablen RegEx-Ausdruckes für die Validierung eines allgemeinen Textfeldes sieht so aus:

/[^ ... ]/

An die Stelle der drei Punkte kommen nun alle Zeichen die erlaubt sein sollen. Für die gängigsten Gruppen von Zeichen gibt es dabei Abkürzungen. [abcdefghijklmnopqrstuvwxyz] würde durchaus funktionieren, aber [a-z] tut es auch. Für Zahlen gibt es den Code [\d]. Also man nehme dieses Beispiel:

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

Verbaut man diesen Code richtig, kann man damit prüfen, ob ein Text ausschliesslich normale Buchstaben und Zahlen enthält. In Worten bedeutet dieser Ausdruck etwa: "Suche nach einem Zeichen, welches NICHT a-z, A-Z oder eine Zahl ist". Wichtig: Der Leerschlag muss auch angegeben werden!

 

Nun sprechen wir aber Deutsch und brauchen auch noch nette Dinge wie Umlaute. Und um auch national flexibel zu bleiben dürfen gerne auch noch die Akzente aus dem Französischen und Italienischen respektiert werden. Ab hier einfach unbedingt darauf achten alle beteiligten Files in UTF-8 zu codieren damit es diese Zeichen den ganzen oft langen Weg vom Formular bis in die Datenbank schaffen!

/[^a-zA-Z\d äëïöüÄËÏÖÜàéèîôûÀÉÈÎÔÛ]/

Schliesslich kann man noch nach Belieben Sonderzeichen hinzufügen. Hierbei muss man allerdings aufpassen, denn die meisten dieser Sonderzeichen haben eine spezielle Bedeutung und um deren Spezialfunktion zu unterbinden muss man sie sog. "escapen", indem man einen Backslash \ voranstellt. Möchte man also runde Klammern zulassen muss man die Zeichenfolge \(\) einfügen:

/[^a-zA-Z\d äëïöüÄËÏÖÜàéèîôûÀÉÈÎÔÛ\(\)\%\-\/]/

Diese Ausdrücke kann man nun wie folgt einbauen:

 

PHP:

if (preg_match("/[^a-zA-Z\d ]/",$input) {
 echo ("Ungültige Eingabe!");
}

JavaScript:

var regEx = new RegExp("[^a-zA-Z\d ]"); {
if (regEx.test(input)) {
 alert ("Ungültige Eingabe!");
}

Schliesslich noch ein Gedanke zum Thema der Wartungsfreundlichkeit. Insbesondere bei grossen Formularen, welche viele verschiedene Reguläre Ausdrücke brauchen um alles zu validieren, oder wenn die Validierung an mehreren Stellen erfolgt, etwa einmal mit JavaScript am Frontend und einmal mit PHP ist es allenfalls eine gute Idee, eine zentrale, übersichtliche Liste der RegEx's zu machen, um Anpassungen einfach, schnell durchführen zu können. Ein möglicher Ansatz ist ein separates PHP file, welches direkt in ein anderes PHP-file eingebunden werden kann oder mit JavaScript über einen Post-Request erreicht werden kann. Hier ein Beispiel: