Reguläre Ausdrücke in unzähligen Programmiersprachen nutzen - auch in HTML5. Als ich vor rund einem Jahr ein Formular erstellt habe, nutzte ich dieses Feature und erstellte einen regulären Ausdruck um den Syntax von Schweizer Postleitzahlen und Telefonnummern zu prüfen.
Als Grundlage für die regulären Ausdrücke dienten mir die umfangreiche Artikel Wikipedias. Ein grosses Dankeschön an diese Stelle an die unglaubliche Community!
Auf Wikipedia findet sich sowohl ein Artikel zu den Schweizer Postleitzahlen, als auch zu den Telefonvorwahlen. Von dort habe ich alle für Privatpersonen gültigen Werte kopiert und daraus einen regulären Ausdruck entwickelt. Natürlich entspricht dies keiner kompletten Datenbank aller gültigen Werte, aber mit einem sehr einfachen Ausdruck lässt sich ein Grossteil der ungültigen Eingaben vermeiden.
Postleitzahlen
Der Syntax für Postleitzahlen ist sehr simpel. Es gibt neun Leitkreise (erste Ziffer) die in mehrere Leitgebiete (zweite Ziffer) unterteilt sind. In den Leitkreisen 5, 7 und 9 werden aber nicht alle Ziffern für Leitgebiete verwendet. Anschliessend folgen die letzten beiden Ziffern für die genaue Ortschaft.
Daraus ergibt sich folgender regulärer Ausdruck:
([1-468][0-9]|[57][0-7]|9[0-6])[0-9]{2}
<input title="Gültige Schweizer Postleitzahl (4 Ziffern)" pattern="([1-468][0-9]|[57][0-7]|9[0-6])[0-9]{2}" type="number" placeholder="Postleitzahl">
Telefonnummern
Der Syntax für die Telefonnummern ist einiges komplexer. Ich musste mich auch hier auf die ersten Ziffer beschränken. Zudem akzeptiere ich keine Trennzeichen und auch keine Ländervorwahl. Dies wäre aber mit einer kleinen Modifikation umsetzbar.
Alle gültigen Nummern beginnen mit der Ziffer 0
. Danach folgen zwei Ziffern für den Aussteller der Telefonnummer. Hier gibt es einige ungültige Kombinationen, die aufgehoben oder noch nicht vergeben sind. Anschliessend erfolgt mit 7 beliebigen Ziffern die individuelle Zuordnung zum Anschlussinhaber.
0(2[1-246-7]|3[1-4]|4[13-4]|5[25-6]|6[1-2]|7[15-68-9]|8[17]|91)[0-9]{7}
<input title="Gültige Schweizer Telefonnummer (10 Ziffern, ohne Trennzeichen)" pattern="0(2[1-246-7]|3[1-4]|4[13-4]|5[25-6]|6[1-2]|7[15-68-9]|8[17]|91)[0-9]{7}" type="tel" placeholder="Telefonnummer">
Das HTML5 pattern
Attribut
Für die Live-Beispiele in diesem Artikel verwende ich das HTML5 pattern
Attribut. Damit lassen sich reguläre Ausdrücke in einem <input>
Feld verwenden. Der Browser prüft die Eingabe und gibt bei Bedarf einen Fehler aus. Im title
Attribut kann man dem Nutzer einen Hinweis geben, welchen Syntax bei der Eingabe befolgt werden muss.
Das pattern
Attribut wird von allen modernen Browsern, ausser Safari, unterstützt. Die Validierung über das pattern
Attribut ist meiner Meinung nach die einfachste und nutzerfreundlichste Methode. Die Überprüfung findet bereits während der Eingabe statt und es ist kein zusätzliches JavaScript notwendig. Die Browser stellen auch bereits Funktionen wie Barnierenfreiheit (zugänglich für Screenreader) und visuelle Effekte zur Verfügung.
Jedoch ist zu beachten, dass die Validierung in HTML-Formularen nicht verlässlich ist, da diese manipuliert werden können, oder die Anfragen auf anderem Wege an den Server gesendet werden können. Die Werte müssen also severseitig nochmal geprüft werden.