[ Input Pattern ]

Formularfelder validieren

Input Pattern Beispiele

 Computer

Beim Arbeiten mit dem PC gibt es natürlich sehr viele Zahlen die sich in Muster packen lassen.

IPv4-Adressen

Adressen in IPv4 verwenden ausschließlich dezimale Zahlen 4 Blöcken, die jeweils durch einen Punkt voneinander getrennt sind. Jede der Zahlen kann im Bereich zwischen 0 und 255 liegen.

IPv4 Adresse Format: 0.0.0.0 bis 255.255.255.254
pattern="((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-4]|2[0-4]\d|[01]?\d\d?)"

255.125.25.220
192.168.1.15
127.0.0.1
255,125.25.220
255:125:25:220
255.256.25.156

Private IP Adresse Format: 10.0.0.0-10.255.255.255 oder 172.16.0.0-172.31.255.255 oder 192.168.0.0-192.168.255.255
pattern="(0?10\.((25[0-5]|2[0-4]\d|[01]?\d\d?))|172\.0?(1[6-9]|2\d|3[01])|192\.168)(\.(25[0-4]|2[0-4]\d|[01]?\d\d?)){2}"

10.0.0.1
172.16.0.25
192.168.200.01
172.026.50.50
12.0.0.1
172.216.0.25
193.168.200,001
172.032.50.50

Subnetzmaske Format: 255.255.255.0 bis 255.255.255.254
pattern="(255\.){3}(25[0-4]|2[0-4]\d|[01]?\d\d?)"

255.255.255.0
255.255.255.8
255.254.255.0
172.216.0.25

IPv4 Adresse mit Subnetz (CIDR) Format: 0.0.0.0/0 bis 255.255.255.254/32
pattern="((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-4]|2[0-4]\d|[01]?\d\d?)/([0-2]?\d|3[0-2])"

2172.216.0.25/8
172.216.0.25/30
172.216.0.25\4
255.255.255.0


IPv6-Adressen

IPv6-Adressen bestehen aus 8 Blöcken, getrennt durch einen Doppelpunkt, mit jeweils vierstelligen Hexadezimalzahlen. Wenn ein oder mehrere Segmente den Wert 0 haben, können diese ausgelassen und durch einen zweiten Doppelpunkt ersetzt werden. Die Kürzung (ab:0:0:0:0:0:bd3:52 = ab::bd3:52) darf nur einmal in einer Adresse vorgenommen werden. Die URL wird in eckige Klammernm gesetzt.

IPv6 Adresse (o. Kürzung)Format: xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx
pattern="([\dA-Fa-f]{0,4}:){7}[\dA-Fa-f]{1,4}"

2001:0DB8:0000:0001:0000:0000:0010:01FF
2001:DB8::1::10:1FF
2001.0DB8.0000.0001.0000.0000.0010.01FF
2001:DB8::1:::10:1FF

IPv6 URL Notation (o. Kürzung) Format: http://[5c55:d8bd:d3aa:a:850::a34:8420]/
pattern="http://\[([\dA-Fa-f]{0,4}:){7}[\dA-Fa-f]{0,4}\]"

http://[2001:0DB8:0000:0001:0000:0000:0010:01FF]
http://[2001:DA8::1:::10:1FF]
http://2001:0DB8:0000:0001:0000:0000:0010:01FF
http://[2001:DG8::1:::10.1FF]


Web Adressen

Länderspezifische TLDs haben immer genau zwei Buchstaben. Generische TLDs sind 3 bis 12 (?) Zeichen lang. TLD-Liste
Für Second-Level-Domain reicht 1 Zeichen. Als Maximallänge gilt laut rfc1035 überall 63.

Für die Validierung von URL existiert in HTML5 eigentlich ein eigener Eingabetyp, <input type="url"> aber wir bauen trotzdem unser eigenes Muster.

http oder https Format: http://x.xx oder https://x.xx
pattern="https?://.{1,63}\.[A-z]{2,13}"

http://example.org
http://example.org
http:/example.org
ftp://example.org

Top-Level-, Second-Level- und Third-Level-Domain Format: example.tld oder user.example.tld
pattern="([A-z\d]([A-z\d-]{0,61}[A-z\d])?\.)+[A-z]{2,12}"

test.example.org
example.org
test.exampl-.org
test.example.o


E-mail

Es ist fast unmöglich ein Muster für E-Mail zu entwerfen, da die Regeln für eine E-Mail-Adresse sehr kompliziert sind. Für die Validierung von Mails existiert in HTML5 ein eigener Eingabetyp,<input type="email">jedoch ist die Validierung nicht wirklich gut. Nicht alle Browser haben das korrekte Muster an Bord. .. also bauen wir unser eigenes Muster. Allerdings sollte man schon den type="email" nutzen, damit die neueren Maschinen die richtige Tastatur einblenden. Es gibt natürlich auch Lösungen mit JS aber wir wollen ja nach Musterlösungen suchen..

Eine E-Mail Adresse teilt sich grundsätzlich in den local part (Teil der E-Mail Adresse vor dem @-Zeichen) und in den domain part (Teil der E-Mail Adresse nach dem @-Zeichen). Erlaubt sind Ziffern (0-9) und Buchstaben (a-zA-Z) aber keine länderspezifischen Sonderzeichen oder Umlaute, sowie die Zeichen # . ! $ % & ' * + - / = ? ^ _ ` { | } ~. (Die werden aber nicht von jeder Software unterstützt). Punkte dürfen weder am Anfang noch am Ende der Adresse eingesetzt werden. Aufeinander folgende Punkte sowie die Verwendung von Leerzeichen sind nicht zulässig. Nicht erlaubte Zeichen dürfen verwendet werden wenn der local-part in Anführungszeichen gesetzt ist. (Wer macht denn sowas?) Die maximal zulässige Länge des local-part beträgt bei einigen Providern 30 Zeichen.

Es gibt auch eine Lösung mit allen Länder-TLD. Eigentlich sollte diese Prüfung nicht vom Browser erledigt werden. Ob eine Adresse existiert hat mit dem Muster nicht viel zu tun. Es zeigt aber was möglich ist.

input type="email"

Die Prüfung, die der Browser aufgrund des Typs "email" macht, liefert eine fehlerhafte Ausgabe.
Fehlt die TLD wird trotzdem auf valide erkannt und ein doppelter Punkt wird ebenfalls nicht moniert. Das sollte eigentlich nicht sein.
Format:
<input type="email">

test@example.com
!$%5@example.com
test@example.
test(at)example.com
test@example
"test..user@example.com
...ä...Ü...@x
test,er@x.net

Sehr einfach (test@-example.com ist natürlich eine falsche Domain!) Format: test@example.tld
pattern=".+@.+\.[A-z]{2,12}"

test@example.com
test@beispiel.test.de
my.test@beispiel.test.de
test@example
test@example.
test(at)example.com
my.test@-example.com

Etwas aufwendiger und nicht ganz richtig aber schon ganz nah dran Format: test@example.tld
pattern="[\w!#\$%&'\*´\+\-/\=\?^`\{\|\}~](?!.*\.\..*)[\w!#\$%&'\*\+\-/\=\?^`\.\{\|\}~]*[\w!#\$%&'\*´\+\-/\=\?^`\{\|\}~]@[A-z\d]+\.[A-z]{2,12}"

test@example.com
!#$%&'*+-/=?^_`.{|}~@example.com
abc.123@example.com
_______@example.com
Abc.example.com
Abc.@example.com
Abc..123@example.com
()[]\;:,<>@example.com
Abc..123@example.com

Eine Lösung mit allen Länder-TLD und ein paar generischen Domains (com, net, org, mil, edu, education als Beispiel) Format: test@example.tld
pattern="([A-z\d][-\w\+\.]*[A-z\d]?)@([A-z\d]([A-z\d-]{0,61}[A-z\d])?\.)+(a[c-il-oq-s-uwxz]|b[abd-jm-or-tvwyz]|c[acdf-ik-oruvx-z]m?|d[ejkmoz]|e([egrs-u]|du(cation)?)|f[i-kmor]|g[abd-il-np-uwy]|h[kmnrtu]|i[del-oq-t]|j[emop]|k[eg-nrwyz]|l[a-cikr-tuvy]|m([acdghk-z]|il)|n[ace-gilopruz]t?|o(m|rg)|p[aef-hk-nr-twy]|qa|r[eouw]|s[a-rt-vyz]|t[cdf-prtvwz]|u[agkmsyz]|v[aceginu]|w[fs]|y[tu]|z[amw])"

test@example.com
test@beispiel.test.de
max@mustermann.om
max@mustermann.org
test@example
test@example.
max@mustermann.on


MAC Adresse

Die Media-Access-Control-Adresse ist die Hardware-Adresse jedes einzelnen Netzwerkadapters.

MAC Adresse allgemein Kanonische Darstellung Format: xx:xx:xx:xx:xx:xx
pattern="([\da-fA-F]{2}:){5}[\dA-F]{2}"

12:34:56:78:9A:BC
12-34-56-78-9A-BC
12-34-56-78-9A-GC

MAC Adresse allgemein Kanonische Darstellung Format: xx-xx-xx-xx-xx-xx
pattern="([\da-fA-F]{2}-){5}[\da-fA-F]{2}"

12-34-56-78-9A-BC 12:34:56:78:9A:BC
12-34-56-78-9A-GC

MAC Adresse allgemein Kanonische Darstellung Format: xx-xx-xx-xx-xx-xx oder xx:xx:xx:xx:xx:xx aber nicht gemischt
pattern="[\da-fA-F]{2}(-|:)([\da-fA-F]{2}\1){4}[\da-fA-F]{2}"

12:34:56:78:9A:BC
12-34-56-78-9A-BC
12.34.56.78.9A.BC
12-34-56:78-9A-BC

MAC Adresse Cisco Kanonische Darstellung 00-60-2F-xx-xx-xx
pattern="00-60-2F-([\dA-F]{2}-){2}[\dA-F]{2}"

00-60-2F-12-34-56 00-61-2F-E4-C3-B2


Farben

RGB: Es gibt die Hexadezimale Schreibweise ( #RRGGBB und #RGB) und die funktionale Schreibweise rgb(R,G,B) in drei Ganzzahlen oder drei prozentualen Werten. Eine Mischung ist nicht zulässig.
HSL: Der Farbton (hue) wird durch einen Winkel (0° - 360°) ohne Einheit angegeben und bezieht sich auf den Farbkreis. Sättigung und Helligkeit werden durch Prozentzahlen angegeben.
A: Erweitert die Farbmodelle um die Deckkraft einer Farbe festzulegen. (0-1).

hexadezimaler RGB-Wert Format: #rgb bis #RRGGBB
pattern="#([A-Fa-f\d]{3}){1,2}"

#fa5
#FFF
#FFF000
#ABCDEF
#fff0000
#AFAFHF
FFF
#FFF00

dezimaler RGB-Wert (0-255) Format: rgb(255,0,0) oder rgb(255, 0, 0)
pattern="rgb\(((25[0-5]|2[0-4]\d|[01]?\d\d?), ?){2}(25[0-4]|2[0-5]\d|[01]?\d\d?)\)"

rgb(255,100,50)
rgb(255, 100, 50)
rgb(255.100.50)
RGB (255, 256, 50)

prozentualer RGBa-Wert (0-100%.Format: rgba(100%,100%,100%,0) oder RGBa(100%, 100%, 100%, 1)
pattern="rgba\(((100|\d?\d)%, ?){3}(1|0\.\d)\)"

rgba(100%,100%,50%,1)
rgba(80%, 100%, 50%, 0.3)
rgba(100,100,50,1)
RGBa (255%, 256%, 50%, 1.1)

Farbcode in HSL (0-360 und 0-100%) Format: hsl(0, 0%, 0%) bis hsl(360, 100%, 100%)
pattern="hsl\((360|3[0-5]\d|[012]\d\d)(, ?(100|\d?\d)%){2},(1|\d)\)"

hsl(360, 100%, 59%)
hsl(255,59%,50%)
hsl(100, 5%, 59%)
hsl(362, 101%, 59%)
hsl(360°, 59, 59)
(360, 59%, 59%)
hsl 360, 59.3%, 59%)
HSL 360. 59%. 59%)

Farbcode in HSLA (0-360 und 0-100%)Format: hsla(0, 0%, 0%) bis HSLA (360, 100%, 100%, 1)
pattern="(hsla|HSLA)\((360|3[0-5]\d|[012]\d\d)(, ?(100|\d?\d)%){2}, ?(1|0\.\d)\)"

hsla(360, 100%, 59%, 1)
hsla(255,59%,50%, 0.8)
hsl(362, 101%, 59%)
hsla(360°, 59, 59)
HSLA(360, 59%, 59%, 0,8%)
HSLA 360, 59.3%, 59%, 0,8)

Passwörter

Für Passworteingaben gibt es diesen Inputtyp <input type="password"> mit dem die Muster auch funktionieren aber nur Platzhalter angezeigt werden. Für die Pattern-Beispiele habe ich die sichtbare Variante .<input type="text"> gewählt

Ein sicheres Passwort besteht mindestens aus 8 Zeichen. Es enthält Große [A-Z]und kleine Buchstaben [a-z] sowie Zahlen\dund am besten auch noch Sonderzeichen\W. Leerzeichen sind nicht erwünscht. Schon bei der Formulargestaltung kann der Webdesigner dafür sorgen dass nur sichere Passwörter akzeptiert werden. Ohne viel Aufwand, nur mit ein bischen Muster.

Sicheres Passwort (min. eine Zahl, ein Groß- ein Kleinbuchstabe und ein Sonderzeichen, aber kein Leerzeichen, 8 - 13 Zeichen lang.
pattern="(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.* ).{8,13}"
pattern="(?=.*\d)(?=.*\W)(?=.*[A-Z])(?=.*[a-z])(?!.* ).{8,13}"

Aa3§xxxxx
My1#Password
0815shit
My1Password

Passwort minimum (8 Zeichen und Ziffern)
pattern="(?=.*\d)(?=.*\W+)(?=.*[A-Z])(?=.*[a-z])(?!.* ).{8,13}"

Aa3§xxxxx
My1#Password
0815shit
My1Password


Datum und Zeit

Numerische Zeit ISO8601 Format: JJJJ-MM-TT(T)hh:mm:ss
pattern="(\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[0-2]\d)|3[01])T([01]\d|2[0-3]):[0-5]\d:[0-5]\d"

2015-10-15T15:15:15
2015-10-15T15:15:15
2015.10.15T15:15:15
2015-10-15 15:15:15

Warum funktioniert das nicht?

Einige Beispiele die ich im Netz gefunden habe sind entweder zu sehr vereinfacht, zu kompliziert oder schlichtweg falsch. Einige sind offenbar nie überprüft worden. Die fehlerhaften Beispiele eignen sich gut um das System richtig zu verstehen.

Passwort
pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$"
Den Begrenzer $ gibt es bei Input-pattern nicht! (?![.\n]) besagt, dass kein Zeilenumbruch folgen darf. Bei einem Input-feld gibt es keinen Zeilenumbruch \n. Man könnte einen per 'copy und paste' einfügen, das wird aber in ein Leerzeichen umgewandelt. Die Voraussage. dass mindestens(!) eine Zahl (?=.*\d) oder(!) | ein Sonderzeichen folgt (?=.*\W+) ist im Sinne der Sicherheit Unsinn, Es sollte eine Zahl und(!) ein Sonderzeichen folgen. Hier brauchen wir nach dem W kein Pluszeichen.

 Kommentare