[ Input Pattern ]

Formularfelder validieren

  Input pattern Training

Beispiel-Übungen

Wenn Du das Tutorial durchgearbeitet hast, kennst Du eigentlich die wesentlichen Bestandteile des Musterbaus. Wir versuchen jetzt mal gemeinsam einige Muster zu bauen, damit das Ganze seinen Schrecken verliert.
Natürlich mußt Du Dich erstmal schlau machen, welchen Regeln die Eingabe folgen soll. Eine Hausnummer, ein Autokennzeichen, eine Buch-ID oder die Mitgliedsnummer in Deinen Turnverein haben (normalerweise) eine bestimmte Logik. Diese mußt Du zuerst erkennen um Dein Muster richtig erstellen zu können. Eine Quelle ist natürlich erstmal Wikipedia.

Mobiltelefonnummern

Für Dein Formular brauchst Du ein Eingabefeld für eine deutsche Mobilfunknummer.

Laut Wikipedia (Stand 09.2014) gelten für Deutschlad folgende Mobilfunk Vorwahlnummern: 0151n, 0152n, 0157n, 0159n, 0160, 0162, 0163, 017n.

Nun suchen wir am besten erstmal die Gemeinsamkeiten. Es fällt sofort ins Auge, es ist die führende '01'. Das können wir uns ja schon mal notieren.
pattern = "01"

Es folgt eine 5, eine 6 oder eine 7, also nehmen wir das pipe |für die Alternativen. Die Auswahlliste in eckigen Klammern ist hier nicht geeignet, weil Du weitere Optionen anfügen musst, deshalb gruppierst Du das mit runden Klammern.
pattern = "01(5|6|7)"

Nach einer 5 folgt eine 1, 2, 7 oder 9, hier können wir die eckige Auswahl-Klammer nutzen
..5[1279]...

Es folgt eine beliebige Ziffer Du nimmst am besten die Kurzschreibweise \d
..5[1279]\d..

Und die zweite Option: Nach einer 6 folgt eine Ziffer 0, 2 oder 3. Auch hier nutzen wir die Auswahl-Klammer.
..6[023]...

Das war die zweite Option. Die letzte: Nach einer 7 folgt eine Ziffer 0-9. Hier könnten wir auch das vordefinierte Zeichen verwenden.
..7\d..

Jetzt setzt Du das ganze noch zusammen
pattern="01(5[1279]\d|6[023]|7\d)

Noch ein ausführlicher Test mit vielen richtigen und fehlerhaften Eingaben - ich glaube, so passt das.

D - mobile Vorwahl: Format: 015xx oder 0162 oder 017x
pattern="01(5[1279]\d|6[023]|7\d)

01521
0162
0171
0175
01531
0164
017
01725

ISBN

Dein Buchhändler (das ist der mit dem bedruckten Papier - hast Du bestimmt schon mal in einen der großen Einkaufstempel gesehen..) möchte gern die Internationale Standardbuchnummer ISBN als Ergänzung auf seiner Bestellseite. Du findest die Nummer auf der Rückseite eines jeden Taschenbuches oder bei gebundenen Büchern auf der Umschlagseite. Damit es nicht zu einfach ist gibt es 2 ISBN-Typen.
Die ISBN-10 - wer hätte das gedacht - hat immer 10 Ziffern, \d{10} und besteht aus vier Teilen. Der Gruppennummer, der Verlagsnummer, der Titelnummer und die Prüfziffer. Die drei ersten Gruppen können unterschiedlich viele Ziffern (theoretisch! 1-7) enthalten, die Prüfziffer ist einstellig und die Vorschrift besagt, dass die Gruppen mit Trennstrichen "-" zu formatieren sind. (\d+)-(\d+)-(\d+)-\d Die Klammern kann man hier auch weglassen.
Wie bekommen wir jetzt aber die Gesamtlänge in das Muster? Nun die Standardbuchnummer ist ein schönes Beispiel wie man Vorhersagen (?=..) anwendet. Wir sagen nämich voraus, dass die Eingabe nur korrekt ist, wenn sie aus gesamt 13 Zeichen (10 Ziffern + 3 Trennstriche) besteht (?=.{13}$)\d+-\d+-\d+-\d. (das $ steht für das Eingabeende also gesamt 13 Zeichen, ohne dieses Zeichen würde die Vorhersage als mindestens 13 interpretiert.)
Die zweite Variante die ISBN-13, nun ja, besteht aus gesamt 13 Ziffern, sie hat nämlich einen Präfix: "978" oder "979".97[89]\d{10} Mit den Trennstrichen sieht das dann so aus: 97[89]-(?=.{13}$)\d+-\d+-\d+-\d
Der Präfix mit Trennung ist also Option, was wir mit dem Fragezeichen markieren: (97[89]-)?(?=.{13}$)\d+-\d+-\d+-\d und schon haben wir ISBN-10 und -13 in einem Muster.
So. Da es aber wohl doch auch ohne die Trennstriche erlaubt ist schreiben wir das ebenfalls in unser Muster. Das pipe "|" hilft uns dabei. \d{10}|\d{13}|(97[89]-)?(?=.{13}$)\d+-\d+-\d+-\d und wir machen das noch ein klein wenig kürzer: \d{10}|\d{13}|(97[89]-)?(?=.{13}$)(\d+-){3}\d .
Die Prüfziffer muss dann natürlich noch seperat per Javascript bzw. auf dem Server überprüft werden.

ISBN-10 ISBN-13 Format: (978-)12-345-6789-0 oder (978)1234567890
<input type="text" pattern="\d{10}|\d{13}|(97[89]-)?(?=.{13}$)(\d+-){3}\d">

978-12-345-6789-0
978-12-345678-9-0
979-1-2345-6789-1
978-123-45-6789-2
9781234567890
568-12345-6789-0
56812-3456-78-82
97912-345-78-82
978-1-2345-6-7891
9731234567890

Datum unter Berücksichtigung der Anzahl der Tage des Monats (ohne Schaltjahr)

Als Format nehmen wir mal das gebräuchliche deutsche Format, also: DD.MM.JJJJ. Eine möglich Lösung wäre diese:
Alle Monate haben mindestens 1 bis 29 Tage. 0[1-9]|[12]\d.
Ein Jahr hat 1 bis 12 Monate 0[1-9]|1[0-2],
Die geben wir gleich dazu. (0[1-9]|[12]\d)\.0[1-9]|1[0-2].
Außer dem Februar haben alle Monate 30 Tage.30\.(0[13-9]|1[0-2])
und einige haben 31. 31\.(0[13578]|1[02])
Zusammengebaut: (0[1-9]|[12]\d)\.(0[1-9]|1[0-2])|30\.(0[13-9]|1[0-2])|31\.(0[13578]|1[02])\. Noch das Jahr dazu:\d{4}. Fertig.

Datum Format: 01.01.0001 - 31.12.9999
pattern="((0[1-9]|[12]\d)\.(0[1-9]|1[0-2])|30\.(0[13-9]|1[0-2])|31\.(0[13578]|1[02]))\.\d{4}">

29.02.2015
29.02.2016
30.04.2008
30.02.2015
31.00.2008
31.04.2008

Zeitraum von Tagen

Für einen Veranstaltungskalender brauchen wir eine Anmeldemaske, die von einem vorgegebenen Datum bis zu einen ebenfalls vorbestimmten Datum Eingabedaten akzeptiert. Das kann man prima mit Javascript lösen. Aber das ist hier eine Anleitung über pattern, und damit geht es auch. Als Vorgabe haben wir das Amerikanische Datumsformat YYYY-MM-DD. Der Datumszeitraum ist: 2014-08-18 bis 2015-06-16.

Dann zerlegen wir mal die Monate:
Im Jahr 2014 hat der August 08 nur noch die Tage 18 bis 31. Die Tage müssen wir natürlich aufsplitten. Das heist der Tag kann sein 18 oder 19 1[89], einer der zwanziger Tage 2\d oder 30 und 31 3[01]. Somit haben wir die erste Option, die wir mit oder | verknüpfen. 08-(1[89]|2\d|3[01])
September und November 09|11 haben jeweils 30 Tage. Tag eins bis neun 0[1-9], die Tage 10 bis 29[12]\d und der dreisigste 30 zusammengefasst also (09|11)-(0[1-9]|[12]\d|30)
Die Monate 10 und 12 haben 31 Tage. 1[02]-0[1-9]|[12]\d|3[01]
Für 2014 haben wir also "2014-((Option1-14)oder(Option2-14)oder(Option3-14))"

Im Jahr 2015 haben die Monate 1, 3 und 5 jeweils 31 Tage (01|03|05)-(0[1-9]|[12]\d|3[01])
Der Monat Februar hat nur 28 Tage 02-(0[1-9]|1\d|2[1-8])
Der Monat April hat 30 Tage 04-(0[1-9]|[12]\d|30)
Und der Juni hat nur die vorgegebenen 16 Tage 06-(0[1-9]|1[0-6])
Zusammen: (2015-( (Option1)|(Option2)|(Option3)|(Option4) )"
Nun verknüpfen wir auch noch die Jahre mit dem OderZeichen und ein paar Klamern dazu: (2014-((Option1-14)|(Option2-14)|(Option3-14))) | (2015-((Option1-15)|(Option2-15)|(Option3-15)|(Option4-15)))

Datum Format: 2014-08-18 bis 2015-06-16
<input type="text" pattern="201(4-((08-(1[89]|2\d|3[01]))|((09|11)-(0[1-9]|[12]\d|30))|((10|12)-(0[1-9]|[12]\d|3[01])))|(5-((02-(0[1-9]|1\d|2[0-8]))|(04-(0[1-9]|[12]\d|30))|((01|03|05)-(0[1-9]|[12]\d|3[01]))|(06-(0[1-9]|1[0-6])))))">

2014-09-28
2015-02-28
2015-06-16
2014-07-28
2015-02-29
2015.02.28
2014-1-216

KFZ-Kennzeichen (DE)

Dein Formular für ein Versicherungsbüro oder die Zulassungsstelle soll ein Feld für das KFZ-Kennzeichen erhalten, das schon vor dem Absenden die Gültigkeit prüft.

Ein Kennzeichen kann 1 bis 3 Buchstaben als Unterscheidungszeichen (Stadt / Kreis) haben. [A-Z]{1,3}

Es folgen nach einer Leerstelle (- den früher üblichen Bindestrich akzeptieren wir nicht mehr.) 1 bis 2 Buchstaben[A-Z]{1,2} .. sowie 1 bis 4 Zahlen. \d{1,4}

Da jetzt aber ein KFZ-Kennzeichen nicht kürzer als 5 und nicht länger als 8 Zeichen (+ 1 Leer) lang sein darf, geben wir die Gesamtlänge mit der vorausschauende Aussage an. (?=.{6,9}$)

Natürlich gibt es noch weitere Einschränkungen. Zum Beispiel gibt es als Unterscheidungszeichen zwar A und AA aber kein AAA, es gibt also keine 3 gleiche Buchstaben hintereinander. Wir schliesen also 3 gleiche Buchstaben mit der negativen Voraussage (?!...und dem Verweis auf einen Klammerinhalt/1aus:(?!(.)\1\1)

Nun sind bestimmte Buchstabenkombinationen nicht zugelassen. Auch diese können wir mit der negativen Voraussage ausschliesen.
(?!HJ|KZ|NS|SA|SD|SS|R[A-Z])
Achja, da gabs doch noch die historischen Fahrzeuge, die ein H an letzter Stelle haben können und die Elektrokarren :) E , aber die Gesamtlänge bleibt gleich.

KFZ-Kennzeichen Format: A BC1234 oder AB C1234 oder ABC D123
pattern="(?=.{6,9}$)(?!(.)\1\1)([A-Z]){1,3} (?!HJ|KZ|NS|SA|SD|SS|R[A-Z])[A-Z]{1,2}\d{1,4}[HE]?"

AA KA256
AA KA2356
S TR1245
STR A1245
E S1234
AA KA235H
AA-KA256
AAA KA256
STR AB1245
ST AB 12
ST KZ123
AA KA2356H

Training

Weitere Trainingseinheiten findest Du bei den Beispielen. Insbesondere bei den Beispiel Schulnoten sind (so hoffe ich) nachvollziebare Erklärungen eingebaut.