inputPattern

Input pattern Anleitung

Formulare mit HTML5 TOP EN

Eingaben in Formularfelder <input> müssen vor der Weiterverarbeitung überprüft werden. Welche Probleme nicht geprüfte Daten bereiten möchte ich hier nicht weiter erörtern.

Zum clientseitigen Prüfen einer Eingabe musste bisher immer aufwendig eine JavaScript-Funktion geschrieben werden. Mit HTML5 gibte es neue Elementtypen, die den modernen Browser veranlassen Prüfungen zu übernehmen.

Für das <input> Element wird ein Typ definiert:
<input type="text">

Für die Typen: »text, search, url, tel, email, und password« existiert nun das Elementattribut 'pattern',
<input type="text" pattern="[0-9]{5}">
. Mit dem Muster, dem 'pattern' das hier vorgegeben wird kann der Browser die Eingabe prüfen kann. Er vergleicht die Eingabe mit dem vom Webseitenbauer erstellten Muster . So kann schon vor der Weiterverarbeitung verhindert werden, dass falsche Eingaben gemacht werden. Standard ist, dass nur bei einer Positivprüfung das Formular weiterverarbeitet wird, ansonsten wird das Formular nicht abgeschickt, und ein Tooltip vom Browser weist den Anwender auf die fehlerhafte Eingabe hin.
Weitere Prüfungen müssen natürlich weiterhin zusätzlich clientseitig und serverseitig sowieso durchgeführt werden, um z.B. auf Sicherheitsmerkmale wie Prüfziffern zu testen oder das Einschleusen von Schadcode zu verhindern.

Es gibt noch weitere Input-Typen, die Touchscreens zum Einblenden von speziellen Tastaturlayouts veranlassen oder den Browser spezielle Auswahlfenster einblenden lasssen. Die Typen »color, date, datetime, datetime-local, month, week, time, number, range« unterstützen nicht das element 'pattern'' und werden deshalb in dieses Tutorial nicht weiter erwähnt.

Wichtig ist, den Dokumenttyp auf HTML5
<!DOCTYPE html>.
und den Zeichensatz auf UTF-8
<meta charset="UTF-8">
einzustellen.
Außerdem wird gefordert, dass man das title-Attribut
<input title="Bitte PLZ eingeben">
verwendet, damit dem Anwender sofort klar ist, welche Eingabe von ihm erwartet wird. Insofern machte es auch Sinn das placeholder-Attribut
<input placeholder="12345">
einzusetzen. Zwingend erforderliche Eingaben können durch das required-Attribut
<input required >
markiert werden. Nutzer werden dann vom Browser per Tooltip automatisch darauf hingewiesen, dass das Feld zwingend auszufüllen ist.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pattern</title>
</head>
<body>
 <form action="#.ext" method="post">
  <label for="plz">PLZ: </label>
  <input
    required
    type = "text"
    id = "plz"
    name = "plz"
    inputmode = "numeric"
    pattern = "[0-9]{5}"
    placeholder = "12345"
    title = "Postleitzahl 5 stellig" >
 </form>
</body>
</html>

Postleitzahl 5 stellig:

Formulare mit CSS3 TOP EN

Browser markieren bei einer Eingabe die nicht auf das vorgegebene Muster passt, das Input-Feld meist mit einer roten Umrandung.

Wir könnten nun mit CSS3 Pseudo Klassen die Hervorhebung der fehlerhaften Eingabe, sowie auch die korrekte Eingabe ergänzend visualisieren. Das lässt Platz für viele CSS-Spielereien mit Hintergrundfarben oder -bildern. Wir arbeiten natürlich auch damit.

/* style for HTML5 formular input pattern */

/*Eine fehlerhafte Eingabe:*/
input:invalid{
 color:red;
}

/*Eine korrekte Eingabe:*/
input:valid{
 color:green;
}

/*Ein Plichtfeld:*/
input[required]{
 background-color:#F08080;
}

Muster TOP EN

Das Muster für Eingabefelder ist der Ausdruck, mit dem verglichen (nicht gesucht) wird. Das einfachste Muster besteht exakt aus den Zeichen die mit der Eingabe verglichen werden. Dies können auch Texte, Metazeichen, Gruppen von Zeichen oder Zeichenklassen sein. Ein Muster das wir später genauer untersuchen, könnte zum Beispiel so aussehen:
pattern="01(5[1279]\d|6[023]|7\d{2})".

Die Runden Klammern ( )fassen Musterblöcke zusammen. Die Pipe |steht für die ODER-Funktion, der Text muss also entweder das eine oder das andere enthalten. Mit Auswahllisten werden Gruppen von Zeichen definiert, die erlaubt (oder verboten) werden sollen. Diese Zeichenklassen werden innerhalb eckiger Klammern [ ]notiert. Der Bindestrich -definiert innerhalb einer Zeichenklasse Bereiche von Zeichen. Falls das Zeichen selbst ein Mitglied der Zeichenklasse sein soll, kann es als erstes oder letztes Zeichen in der Liste verwendet werden oder es muss maskiert werden, indem ein \vorangestellt wird. Mit dem Accent Zirkumflex ^werden Zeichen ausgeschlossen.

Metazeichen sind Platzhalter für eine Gruppe von anderen Zeichen. Soll das Zeichen selbst Teil des Musters sein, muss es maskiert werden. Der Backslash (selbst auch ein Metazeichen) \ist dafür zuständig. Der Punkt . steht für jedes beliebige Zeichen. Sollen die Klammern und das Pipe -Zeichen Teil des Musters sein, sind sie zu maskieren.

Als Alternative zu den Zeichen können spezielle Zeichen eingesetzt werden. In Verbindung mit dem Backslash steht das \s(whitespace) für das Leerzeichen oder einen (kopierten) Tab. \w(word) erlaubt alle Ziffern und die Zeichen von A bis Z und a bis z sowie den Unterstrich, \d(digit) erlaubt alle Ziffern. Die jeweilige Großschreibung /S /W /Dverbietet die entsprechende Eingabe. Die Anwendung dieser Negierung ist für input-pattern allerdings nicht ganz einfach.

Quantifier bestimmen die Anzahl eines jeweils direkt davor stehenden Ausdrucks. So kann die minimale, maximale oder exakte Anzahl des Zeichens oder der Zeichengruppe bestimmt werden. Der Stern *gibt an, dass ein Ausdruck keinmal bis beliebig oft vorkommen kann. Das Plus +gibt an, dass ein Ausdruck mindestens einmal bis beliebig oft vorkommen kann. Das Fragezeichen ?gibt an, dass ein Ausdruck ein mal vorkommen kann, aber nicht vorkommen muss. Geschweifte Klammern { }ermöglichen die Angabe der minimalen, maximalen oder exakten Anzahl an Zeichen bzw. Wiederholungen.

Wie Du das alles zusammenbauen kannst, um ein sinnvolles Muster zu erhalten, siehst Du im folgenden.

Die Prüfung TOP EN

In Webformularen wird immer die gesamte Eingabe in einem Eingabefeld mit dem vorgegebenen Muster verglichen. Du kannst nicht Teile der Eingabe prüfen.

Die Regeln der Formular input pattern folgen zwar den Regeln der RegEx von Javascript aber es gibt doch Unterschiede. Die bei Programmiersprachen benötigten Anfangs- und Endebezeichner ^ ... $brauchen bei HTML5 pattern also nicht verwendet werden. Man sieht dies zwar oft ^[0-9]{5}$, und es führt offenbar auch nicht unbedingt zu einem Fehler, aber es wird, wie Du ja nun weißt, immer die gesamte Eingabe verglichen. Du musst Dich darum nicht auch noch kümmern. Richtig ist hier also einfach: [0-9]{5}.

Da wir nur ein einzeiliges Input-Feld haben, können wir natürlich auch nicht auf Zeilenumbrüche prüfen. Auch die Modifier zur Groß- und Kleinschreibprüfung werden nicht verwendet.

Für das Formular selbst brauchen wir noch den passenden Eingabetyp, ansonsten findet keine Prüfung statt. Eingabetypen für einen Mustervergleich sind »text, search, url, tel, email, und password«. Für diese Anleitung verwende ich ausschließlich den Text-Typ. type="text"
Die anderen Typen helfen eventuell einem Tablet oder Smartphone, die angepasste Tastatur (also bei type ="tel" eine Zahlentastatur, bei type ="url" ein zusätzliches ".com") einzublenden.

Für den Webseitenbauer gibt keine Fehlermeldung!

Wenn das Muster an sich fehlerhaft, also falsch aufgebaut ist, dann ist es möglich, dass jede beliebige Eingabe als gültig oder auch als ungültig erkannt wird. Wenn Du nur Zahlen erlauben willst und versehentlich Buchstaben als Muster eingegeben hast, wie soll man sowas testen?
Man muss also prüfen, prüfen, prüfen.
Syntaxfehler also Verstöße gegen die Satzbauregeln wie z.B. fehlende Klammer oder so kann man natürlich noch durch eine Test-Maschine laufen lassen.

Die Mustermacher TOP EN

Oft ist zu entscheiden, ob man bereits bei der Mustererstellung z.B Großschreibung [A-Z] erzwingen möchte oder ob man das später per Script umwandelt.
Zum Beispiel ist bei der IBAN (DE1212345678901234567890) die Länderkennung immer in GROSS-Buchstaben und eine IBAN hat keine Leerstellen, aber für den Menschen ist es einfacher diese lange Zahlenkette in Gruppen, also mit Leerzeichen einzugeben. (DE12 1234 5678 9012 3456 7890). Dies muss dann unter Umständen bei der Weiterverarbeitung korrigiert werden. Manchmal gibt es für Maschine-Maschine und Mensch-Maschine auch unterschiedliche Regeln. Das müssen wir bei unserem Musterbau berücksichtigen. Letztendlich ist es die Entscheidung des Mustermachers, ob er bei der Eingabe Zugeständnisse an den User macht, und anschließend per Script den Vorschriften genüge tut.

Muster erstellen

Einfache Muster TOP EN

Einfache Muster werden aus Zeichen konstruiert, für die man eine direkte Übereinstimmung finden möchte. Buchstaben, Zahlen oder Sonderzeichen. Nur wenn die Eingabe mit dem Muster übereinstimmt, wird die Eingabe auch vom Browser akzeptiert. Auch ein einfaches Wort oder eine Zahlenfolge sind ein gültiges pattern. pattern="Hallo Welt"kann bereits ein einfaches Muster sein, das vom Browser als Basis für den Vergleich mit der Eingabe benutzt wird. Es wird nur diese Buchstabenkombination akzeptiert.
Sonderzeichen '§§15 & 16' und Zahlen 0815 werden genauso behandelt. Das brauchen wir einfach nur so hinzuschreiben.

Hier wird nur der Großbuchstabe 'A' als korrekte Eingabe akzeptiert.
<input type="text" pattern="A">

A

AA
a
5

Hier wird nur 'Hallo Welt' als korrekte Eingabe akzeptiert.
<input type="text" pattern="Hallo Welt">

Hallo Welt Hello World
HalloWelt

Hier wird nur '0815' als korrekte Eingabe akzeptiert.
<input type="text" pattern="0815">

0815 0816
abc

Zeichenauswahl TOP EN

Mit den eckigen Klammern [ ]kannst Du eine Auflistung von Zeichen als Muster angeben. Die Klammer steht aber nur für ein Zeichen aus der Auswahl. [ABCD] Gültig wäre hier also nur A oder B oder C oder D. Da die Buchstaben in diesem Beispiel fortlaufend sind, kannst Du den Ausdruck auch mit dem Bindestrich schreiben. [A-D].
Alle großen Buchstaben [A-Z], alle kleinen [a-z]und alle Zahlen. [0-9].

Länderspezifische Buchstaben, in Deutschland sind das die Umlaute und das Eszett, sind in diese Liste nicht enthalten. Wir schreiben diese Zeichen einfach dazu. So ist, um alle deutschen Buchstaben zu bemustern, der Ausdruck [A-Za-zÄäÖöÜüß]als Muster gültig.

Hier wird nur ein Großbuchstabe aus der Auswahl A-D als korrekte Eingabe akzeptiert.
<input type="text" pattern="[ABCD]">

A
B
C
D
E
H
U
Z

Buchstaben, auch Umlaute, keine Sonderzeichen
<input type="text" pattern="[A-zÄÖÜäöüß]">

A
k
ö
ß
1
6
&
#

eine Zahl
<input type="text" pattern="[0-247-9]">

0
1
7
3
5
6

Unicode table TOP EN

Natürlich brauchen wir des öfteren alle Groß- und Kleinbuchstaben [A-Za-z], die könntest Du auch kurz so [A-z]notieren. Allerdings sind dann noch die Zeichen [\]^_`dabei. Warum?
Nun, es wird die Unicode Zeichentabelle verwendet. In dieser Tabelle sind 16 Ebenen mit jeweils 65536 Zeichen.
So finden wir da zum Beispiel neben den erwarteten lateinischen Zeichen auch Silbenlaute kanadischer Ureinwohner oder die Zeichen der Cherokee. Für beinahe jeden Sprache die Schriftzeichen, viele Symbole und einige Steuerzeichen. Die Tabelle "lateinisch-basic" enthält z.B. - wer hätte es gedacht - die lateinischen Buchstaben, Zahlen und einige Sonderzeichen, die man auch auf einer normalen westlichen PC-Tastatur findet.

Nun kommt das was uns eigentlich interessiert: Die Reihenfolge der Zeichen die wir mit [von - bis]als Muster notieren ist durch ihre Position in der Unicode Tabelle festgelegt.
Vereinfacht gesagt, zuerst kommt das A, dann das B, dann das C, dann... wir können also [A-Z]oder [0-9]schreiben wenn alle Zeichen dazwischen auch gemeint sind.
Aber in der Tabelle sind die Groß- und Kleinbuchstaben nicht direkt hintereinander. Die Reihenfolge ist ..XYZ[\]^_`abc.. Somit beinhaltet[A-z] also auch die dazwischenliegenden Zeichen [\]^_`.

Die Zeichen Ä, Ö, Ü finden wir in der Tabelle lateinisch-Ergänzung 1. Wenn wir die Zeichen suchen finden wir etliche Zeichen dazwischen. [Ä-Ü]würde also auch viele andere Zeichen ÄÅÆÇÈ**ÉÊËÌÍÎÏÐÑÒ**ÓÔÕÖ×ØÙÚÛÜumfassen.

Die nutzbaren Zeichen in der Tabelle lateinisch-basic: U+0000 bis U+007F
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~

Die nutzbaren Zeichen in der Tabelle lateinisch-Ergänzung 1: U+0080 bis U+00FF
¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

Die nutzbaren Zeichen in der Tabelle lateinisch-Erweiterung A: U+0100 bis U+017F
ĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſ

Die nutzbaren Zeichen in der Tabelle lateinisch-Erweiterung B: U+0180 bis U+024F
ƀƁƂƃƄƅƆƇƈƉƊƋƌƍƎƏƐƑƒƓƔƕƖƗƘƙƚƛƜƝƞƟƠơƢƣƤƥƦƧƨƩƪƫƬƭƮƯưƱƲƳƴƵƶƷƸƹƺƻƼƽƾƿǀǁǂǃDŽDždžLJLjljNJNjnjǍǎǏǐǑǒǓǔǕǖǗǘǙǚǛǜǝǞǟǠǡǢǣǤǥǦǧǨǩǪǫǬǭǮǯǰDZDzdzǴǵǶǷǸǹǺǻǼǽǾǿȀȁȂȃȄȅȆȇȈȉȊȋȌȍȎȏȐȑȒȓȔȕȖȗȘșȚțȜȝȞȟȠȡȢȣȤȥȦȧȨȩȪȫȬȭȮȯȰȱȲȳȴȵȶȷȸȹȺȻȼȽȾȿɀɁɂɃɄɅɆɇɈɉɊɋɌɍɎɏ

Die nutzbaren Zeichen in der Tabelle Griechisch, Koptisch: U+0370 bis U+03FF
ʹ͵ͺͻͼͽ;΄΅Ά·ΈΉΊΌΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώϐϑϒϓϔϕϖϗϘϙϚϛϜϝϞϟϠϡϢϣϤϥϦϧϨϩϪϫϬϭϮϯϰϱϲϳϴϵ϶ϷϸϹϺϻϼϽϾϿ

Die nutzbaren Zeichen in der Tabelle lateinisch-Erweiterter Zusatz:U+1E00 bis U+1EF9
ḁḂḃḄḅḆḇḈḉḊḋḌḍḎḏḐḑḒḓḔḕḖḗḘḙḚḛḜḝḞḟḠḡḢḣḤḥḦḧḨḩḪḫḬḭḮḯḰḱḲḳḴḵḶḷḸḹḺḻḼḽḾḿṀṁṂṃṄṅṆṇṈṉṊṋṌṍṎṏṐṑṒṓṔṕṖṗṘṙṚṛṜṝṞṟṠṡṢṣṤṥṦṧṨṩṪṫṬṭṮṯṰṱṲṳṴṵṶṷṸṹṺṻṼṽṾṿẀẁẂẃẄẅẆẇẈẉẊẋẌẍẎẏẐẑẒẓẔẕẖẗẘẙẚẛẞẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹ

Data can be entered beyond the limits of the tables. [[z-À]] also includes the '~'. It is interesting that the Greek table comes in the order before the Latin extension. This should be considered. if you want to combine Ḁ and Σ.

Setting the area backwards doesn't work by the way. [Z-A]or [9-0]are invalid, the pattern is ignored, so any input is valid. And that's not what we want.

<input type="text" pattern="[9-0]">

A
b
X
#




Zeichen ausschliesen TOP EN

Da, wie gesagt, die Auflistung in den eckigen Klammern für nur ein Element steht, kannst Du durch geschickte Auswahl Zeichen ausschließen. Die Muster [0-247-9] bzw. [01247-9] lassen nur die Zahlen 0 bis 2, die 4 und die Zahlen 7 bis 9 zu. [A-HK-TZ] nur die Buchstaben A-H, K-T und das Z. Alle anderen werden zurückgewiesen. Wenn Du ein Leerzeichen oder ein Komma zwischen die Bereiche machst, sind auch diese Teil des Musters.

Mit dem Zirkumflex ^ können wir die Zeichen, die wir nicht haben wollen, ausgeschließen.[^Ad5] erlaubt demnach alle denkbaren Zeichen nur nicht die Auswahl in der Klammer, also das A, das d oder die 5. Der Ausdruck, der für alle Sonderzeichen steht, könnte so aussehen: [^A-zÄÖÜäöüß0-9] Allerdings sind dann natürlich auch alle griechischen, chinesischen, und und .. Zeichen erlaubt.

Die Anwendung ist in der Praxis nicht ganz einfach. Ich meine, die Aufzählung des Erlaubten ist oftmals einfacher als die Aufzählung des Verbotenen, vor allem wenn man dies verschachtelt braucht, was sehr wahrscheinlich oft der Fall ist.

Zeichen ausschliesen Format: $ oder X oder n
<input type="text" pattern="[^Ad5]">

B
e
3
A
d
5

Zeichenauswahl mit mehreren Elementen TOP EN

Selbstverständlich musst Du ein Muster für eine größere Menge an Zeichen erstellen, denn die Eingabe wird selten nur ein einzelnes Zeichen umfassen. Mehrere rechteckige Klammern könnten dafür das Muster bilden. Die komplette Eingabe wird mit Deinem Muster-Ausdruck verglichen. [A-Z][a-z][a-z][a-z][a-z] steht für ein Zeichen mit großen Buchstaben, es folgen 4 Zeichen mit Kleinbuchstaben. Werden mehr oder weniger Buchstaben oder gar Zahlen oder Sonderzeichen eingegeben wird der Browser die Weiterverarbeitung des Formulars verhindern.

Hauptwort mit 5 Buchstaben Format: Xxxxx
<input type="text" pattern="[A-Z][a-z][a-z][a-z][a-z]">

Bauer
Ahorn
Mocca
Halle
haben
Kind
Kissen
Die 3

Zahl mit 5 Stellen Format: nnnnn
<input type="text" pattern="[0-9][0-9][0-9][0-9][0-9]">

12345
98765
85219
01022
123456
1234
Kissen
Die 3

DE - KFZ-Kennzeichen Format: XX-Xnnn
<input type="text" pattern="[A-Z][A-Z]-[A-Z][0-9][0-9][0-9]">

AB-C123
DE-R568
ZU-M852
UL-M800
AB-c123
AB-CD12
A-C123
AB-CD1234

Zeichenauswahl mit Wiederholungen TOP EN

Nun ist es unsinnig, endlos viele Zeichen in eckigen Klammern hintereinanderzusetzen. Bei langen Zahlen wie z. B. der IBAN nutzen wir die geschweiften Klammern { } So kannst Du die Anzahl der Wiederholungen angeben. Du schreibst sie einfach direkt hinter deine Zeichenauswahl. [A-z]{20}.

DE- Postleitzahl 5 Zahlen: Format: nnnnn
<input type="text" pattern="[0-9]{5}">

12345
98765
85219
01022
123456
1234
Kissen
Die 3

Deutsche IBAN Format: DEnnnnnnnnnnnnnnnnnnnn
<input type="text" pattern="DE[0-9]{20}">

DE98123412341234123412
DE12345678901234567890
De98123412341234123412
DE123456789O1234567890

Zeichenauswahl mit Mindest- und Maximallänge TOP EN

Eine Möglichkeit ist, für dein Muster auch hier die geschweiften Klammern { }zu verwenden. Es gilt {min, max}. Möchte man also zum Beispiel mindestens fünf, aber maximal 10 Zeichen erlauben, könnte man beliebig viele Zeichen in das Input-Feld eingeben, aber durch unser Muster [A-z0-9]{5,10} wird die Gültigkeitsprüfung des Browsers nur maximal 10 Zeichen akzeptieren. Allerding sind auch mindestens 5 Zeichen gefordert!

Du kannst die maximal geforderte Anzahl der Zeichen auch weglassen {2, }, musst aber das Komma angeben, ansonsten wäre die Zahl in der Klammer die feste Anzahl von Zeichen. Bei Angabe einer maximalen Anzahl muß auch die mindest Anzahl zwingend angegeben sein. {0,4}

Eine weitere Möglichkeit ist, das Pluszeichen, den Stern oder das Fragezeichen zu verwenden. Das Pluszeichen steht für ein mindesten 1-maliges Vorkommen des Ausdrucks [0-9]+ . Der Stern [0-9]* steht für kein oder beliebig viele Vorkommen. Das Fragezeichen [0-9]? steht für einmal oder keinmal.

In Verbindung mit dem Attribut required, das das Formulareingabefeld als zwingend auszufüllen markiert, wird der Browser das Formular nicht weiterverarbeiten, wenn das Feld laut pattern leer sein darf x{0,8}, x* oder x?

Für input-Felder existiert das Attribut maxlength="n", das die maximale Anzahl aller Zeichen bestimmt. Der Browser lässt gar nicht zu, dass man mehr eingibt. Will man also zum Beispiel nur maximal vier Zeichen erlauben, so schreibt man: <input maxlength="4">. Achtung, das könnte natürlich mit einer min-Angabe im pattern kollidieren.

<input type="text" pattern="[A-z]{1,3}">
<input type="text" pattern="[A-Z][a-z]{0,12}">
<input type="text" pattern="[A-Z][a-z]{2,}">

<input type="text" pattern="[A-Z][a-z]?">
<input type="text" pattern="[A-Z][a-z]+">
<input type="text" pattern="[A-Z][a-z]*">

Probleme mit Input-pattern max Angaben und HTLM Längenangaben bzw. der Angabe: required:

Zwingend erforderliche Eingabe (required) - lt. Muster aber auch ohne Eingabe gültig {0,}!
<input required type="text" pattern="[0-9]{0,}">
Mindestlänge muß angegeben werden!
<input type="text" pattern="[0-9]{,3}">
Das Feld hat maximal 4 Stellen, das Muster fordert aber mindestens 5!
<input type="text" pattern="[0-9]{5,}" maxlength="4">
<input type="text" pattern="[0-9]" minlength="2" > -->

Zeichenauswahl mit Alternativen TOP EN

Willst Du Alternativen anbieten, also Kaffee oder Tee ist das Pipe-Zeichen | das geeignete Mittel, es trennt die Alternativen. Kaffee oder Tee oder Saft würden wir dann so auszeichnen:Kaffee|Tee|Saft.

<input type="text" pattern="Kaffee|Tee|Saft">

Kaffee
Tee
Saft
Expresso
Punsch
Glühbier

<input type="text" pattern="Weißwein|Rotwein|Rosé|Sekt">

Weißwein
Rotwein
Rosé
Sekt
Wein
Perlwein
Roséwein
Bier

Zeichen mit besonderer Bedeutung TOP EN

Metazeichen sind Zeichen, die zusätzlich zu ihrem Dasein als Zeichen eine Funktion haben. Willst Du sie als Zeichen und nicht als Funktion verwenden, sind sie zu maskieren. Das heißt, man setzt einen Backslash \ davor. Es gibt einige dieser Metazeichen. Ein paar hast Du schon kennengelernt. Die Klammern, rund, eckig oder geschweift oder auch das Fragezeichen, das Plus und den Stern. ( ) { } [ ] ? + - * ^ $. Der Punkt . steht so einerseits für ein beliebiges Zeichen, will man aber auf dem Punkt prüfen, so setzt man den Backslash davor\.. Das Fragezeichen kennzeichnet das 'kann aber muss nicht'. Willst Du es als Teil des Musters, dann muß es maskiert werden\?. Ist das Zeichen in eckigen Klammer ganz vorn oder ganz hinten, so kannst Du Dir die Maskierung sparen, aber nicht beim Punkt, das ja dann für alle Zeichen steht. Im Beispiel Wasser? steht das "?" für den Quanifier einmal oder keinmal. Mit dem Backslash steht es für das Fragezeichen.

Was möchtest Du trinken? ..
<input type="text" pattern="(Wasser)?">

Wasser Wasser?

<input type="text" pattern="(Wasser)\?">

Wasser? Wasser

Vordefinierte (Meta)Zeichen TOP EN

Um Buchstaben und Zahlenauswahl abzukürzen, gibt es vordefinierte Zeichen. Auch ihnen wird ein Backslash vorangestellt, um sie von einem normalen Zeichen zu unterscheiden.
\d eine Ziffer, also [0-9]
\D ein Zeichen das keine Ziffer ist, also [^0-9] oder [^\d].
\w ein Buchstabe, eine Ziffer oder der Unterstrich, also [a-zA-Z_0-9]
\W ein Zeichen, das kein Buchstabe, keine Ziffer oder kein Unterstrich ist, also [^a-zA-Z_0-9] = §$%&!:#...
\s das Leerraum (whitespace) Leerzeichen, Tab..
\S ein Zeichen, das kein Leerzeichen ist, also [^ ] oder [^\s]
\t ein Tab (ist nur durch copy + paste in ein input-feld zu bekommen.

 

<input type="text" pattern="[\d]{5}">

12345
98765
85219
01022
123456
1234
Kissen
Die 3

<input type="text" pattern="\D+">

Bauer
Ahorn
Mocca
Halle
3sel
123456
5alz
Die 3

Zeichen gruppieren TOP EN

Die runde Klammer ( )wird verwendet, um längere zusammengehörige Ausdrücke zu markieren. (pa){2}(ma){2} Der Quantfier hier bezieht sich auf den letzten Ausdruck, also den Inhalt der runden Klammer. Ohne die runde Klammer hätten wir nur eine Verdoppelung des letzten Zeichens.

Runde Klammern dürfen auch verschachtelt werden.
(A(BC){2}){2} meint:(A(BC)(BC)A(BC)(BC) also: Ein A 2xBC und das ganze nochmals doppelt =ABCBCABCBC

<input type="text" pattern="(ma){2}">

mama MaMa

<input type="text" pattern="(Weiß|Rot)wein|Ros(é|e)|Sekt">

Weißwein
Rotwein
Rosé
Rose
Sekt
Wein
Perlwein
Roséwein
Glühwein
Bier

Welchen Tee darf ich Dir aufgiesen?
<input type="text" pattern="((Roi|Rooi)bos|Roibush|(Rot|Roi)busch|Massai)tee">

Roibostee
Roibushtee
Rotbuschtee
Massaitee
Rooibushtee
Rooibuschtee
Grüner Tee
Masaitee

Verweise TOP EN

Eine weitere Funktion der runden Klammern ist, dass wir mit maskierten Zahlen /1/2/3usw. auf unsere Gruppen zugreifen können. Die Zahl verweist auf die aufnehmende Klammer in genau der Reihenfolge, die Du angelegt hast.

Das Muster ([A-z])\1 erwartet 2 Zeichen, eines aus der Liste [A-z] und eines das genau identisch zum ersten ist. Also zum Beispiel 'AA'.

Kinder sprechen erstmal eine einfache Sprache, die meist aus Doppelung von Silben besteht. (mama, papa, popo, pipi, lala). ([a-z])([a-z])\1\2 ist das Muster dazu. Die maskierte Eins \1 verweist auf das Muster der ersten Klammer, \2auf das Muster der zweiten Klammer. Die Eingabe des dritten Buchstabens muss also gleich lauten wie die des Ersten, die des 4ten gleich wie die des 2ten.(mama)

Noch eins aus dem richtigen Leben?
Lagerverwaltung, Du hast eine 9stellige TeileNummer von Irgendwas. Das Sytem gibt vor, dass User die Nummer mit Trennern (Punkt, Komma, Leerzeichen, Strich) in 3er Blöcken 123.456.789 eingeben kann, muss aber nicht. Die Trenner dürfen aber auf keinen Fall gemischt verwendet werden! Also nur Punkte oder nur Kommata oder (..). Der Verweis auf den wiederholten Inhalt könnte das regeln.
[0-9]([. ,-]?)[0-9]{3}\1[0-9]{3}.
Der zweite Trenner muss also zum Ersten identisch eingegeben werden.

Das Minuszeichen ist nicht maskiert, weil es am Anfang oder Ende der Liste nicht als 'von-bis' interpretiert wird. Wir stat der Liste das Pipe verwendet müsste man den Punkt maskieren.

Doppel
<input type="text" pattern="([A-z])\1">

aa
55
xx
ab
85
L54

Doppelung
<input type="text" pattern="([a-z])([a-z])\1\2">

mama
papa
lala
mami
para
lalü

9stellige TypTeileNummer Format: nnnnnnnnn oder nnn nnn nnn oder nnn.nnn.nnn oder nnn-nnn-nnn
<input type="text" pattern="[0-9]{3}([., -]?)[0-9]{3}\1[0-9]{3}">

123123123
123 123 123
123.123.123
123-123-123
1231 23123
123.123,123
123 123.123
123-123 123

Klammer ausschließen TOP EN

Und es kommt noch besser: Wenn Du nun eine Klammer von diesen Verweisen ausschließen willst, kannst Du das einfach mit ?:machen.
Beispiel: (\w)(?:\w)(\w)(\w)\2. Es werden 5 Zeichen erwartet. Die maskierte /2 verweist auf die zweite Klammer, da die aber nicht freigegeben ist, ist die nächste Klammer das Verweisziel. In diesem Fall also die Klammer drei. Das heißt, die Eingabe wird vom Browser nur akzeptiert, wenn bei der Eingabe der 3te und 5te Zeichen indentisch ist.

Die 2teKlammer ausschliesen, somit ist die dritte Klammer die Zweite
<input type="text" pattern="(\w)(?:\w)(\w)(\w)\2">

Na2O2
22222
Na2O3
22322

Positive Vorhersage TOP EN

Eine positive vorausschauende Aussage (?=x)(look-ahead) legt Parameter für das nachfolgende Musters fest. Er wird in einer Klammer mit Fragezeichen und Gleichheitszeichen notiert.
Die Vorhersage zusammen mit dem eigentichen Muster (?=.{5}$)[A-Z]*sagt aus, dass die Eingabe 5 Großbuchstabe lang sein muss. Das "$" steht für das Eingabeende, also gesamt 5 Zeichen, ohne dieses Zeichen würde die Vorhersage als mindestens 5 Zeichen interpretiert. Dieses Beispiel ist zu vereinfacht, um den Sinn besser zu verstehen lies bitte das Training ISBN.
So könnte z. B. das Muster (?=.* Apfel .*).*bedeuten, dass in einem Wort oder Satz das Wort "Apfel" vorkommen muss.
So legt der Ausdruck (?=.*[A-Z]).*fest, dass im Ausdruck Großbuchstaben enthalten sein müssen. Falls nun Groß- und Kleinbuchstaben enthalten sein müssen und eine bestimmte Länge eingehalten werden soll, so baust Du das Muster aus einer Kombination der Parameter. (?=.{5,})(?=.*[A-Z])(?=.*[a-z])[A-z]*

insgesamt 5 Zeichen lang, der Punkt irgendwo mittig Format: n.nnn oder nn.nn oder nnn.n
<input type="text" pattern="(?=.{5}$)\d+\.\d+">

1.234
12.34
123.4
1234
.1234
1234.

Die Zeichenfolge 'tan' muss in der Antwort vorkommen.
<input type="text" pattern="(?=.*[Tt]an.*).*">

Zustand
Tanz
Wutanfall
Berlin
Natur
Wutach

Passwort muss mindestens 8 Zeichen lang sein und muss Großbuchstaben, Kleinbuchstaben, Zahlen und Sonderzeichen enthalten!
<input type="text" pattern="(?=.{8,}$)(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*\W).*">

Negative Vorhersagen TOP EN

Die negativen vorausschauenden Aussage (?!x)(look-ahead) legt fest, dass ein Ausdruck nicht von etwas gefolgt wird. So behauptet zum Beispiel das Muster (?!02)(0[1-9]), dass nachfolgend die Eingabe 00 bis 09 möglich ist, aber nicht die 02!
Ein Beispiel: In Deiner Lieblingsabsteige gibt es keine Zimmernummer 13, auf keinem Stockwerk. Du kennst das. Warum? Weil der Musterersteller das Zimmer aus dem Formular herausgenommen hat! (?!13)\d{2}War doch klar.

Hotel - Zimmernummer 001 - 299 aber keine x13
<input type="text" pattern="[012](?!13)\d{2}">

025
133
237
013
113
213

Die Zeichenfolge 'no' darf nie vorhanden sein.
<input type="text" pattern="(?!.*no.*).*">

yes
zahlen
Bariton
no
noten
Tenor

3 gleiche hintereinander.
<input type="text" pattern="(?=.*(.)\1\1.*)\w*">

Betttuch
1000
Schifffahrt
Brennnessel
Bettuch
1001
Schiffahrt
Brennessel

Keine 3 gleichen hintereinander.
<input type="text" pattern="(?!.*(.)\1\1.*)\w*">

zoologisch zooologisch

Häufige Fehler

nicht getestet, nur kopiert TOP EN

Rückschauende Behauptungen (look-behind) die in verschiedenen Programiersprachen verwendet werden, gibt es für Input Pattern nicht. Wie Ihr wisst sind die pattern an die Regeln von Javascript RegExp angelehnt. Dort gibt es das auch nicht.
Auch ein carriage return oder einen Tab gibt es nicht! Falls mit Du mit copy/paste das von irgendwoher in das Inputfeld einfügst, wird es wie ein space getestet. Das gleiche gilt für newline.

Ich habe viele, viele pattern gefunden, die überhaupt nicht laufen. Entweder sind sie total kaputt oder machen nicht das was sie sollen. Wir als Webworker müssen eigentlich schon darauf achten, dass das Muster, das wir als Vergleich zur Verfügung stellen, in Ordnung ist. Hab ich eigentlich schon erwähnt, dass Du Deine Muster testen solltest, bevor Du sie der www-Welt zum Fraß vorwirfst?

Es gibt für viele Programmiersprachen Vergleichsmusterregeln. (Regular Expresions, RegEx, RegExp, ...) Sie unterscheiden sich in dem einen oder anderen. Die Regular Expresions der Input pattern folgen nach dem Willen der 3W den Regeln von JavaScript und nicht dem von Perl oder irgendeiner anderen Sprache! Es macht keinen Sinn ein Muster das du bei C, C++, Java, Python, Ruby oder PHP im Netz gefunden hast, einfach zu kopieren, es wird vermutlich nicht das tun, was du haben möchtest. Vielleicht sieht es ähnlich aus, muss aber an unser formular input pattern angepasst werden. Allerdings gibt es auch einige von JS abweichende Regeln, siehe oben.

Leider hab ich auch eine einige beliebte pattern Sammlung und Tipps gefunden die mit sehr vielen schlechten Beispielen glänzen. Wer aus von dort, (das gilt natürlich auch für diese Seite!) etwas kopiert, sollte gut prüfen.

Sicher sind auch meine Beispiele nicht fehlerfrei, aufgrund der Unmenge an Mustern ist es unmöglich alle komplett auf positive oder negative Eingaben zu überprüfen.

Zusammenfassung

Auswahl (Liste)
[   ]Auswahl vom Zeichen[abc]
[^  ] keines der Zeichen innerhalb der Klammer[^abc]
[A-Z]ein Buchstaben groß A-Z[A-Z]
[a-z] ein Buchstaben klein a-z[a-z]
[A-z] ein Buchstaben, groß, klein, einige Sonderzeichen A-Z a-z [\]^_`[A-z]
[0-9] eine Zahl 0-9[0-9]
Gruppen und Verweise
(  )Gruppe von Zeichen (abc)
\1 Verweis (Eingabe ist der Eingabe von Klammer 1 identisch)(\D)(\d)\1
\2 Verweis (Eingabe ist der Eingabe von Klammer 2 identisch)(\D)(\d)\2
?: von Verweis ausschliesen
(Erste Klammer ausgeschlossen, also ist die Zweite die Erste)
(?:[abc])(\d)\1
Meta
\ (backslash) maskieren eines Metazeichens\d
. (Punkt) ein beliebiges Zeichen1.2
\. (maskierter Punkt) = der Punkt.1\.2
/ (slash) normales Sonderzeichen/
| Metazeichen: oderab|cd
- Metazeichen: Auswahlbereich von-bis innerhalb [0-5]
\d (digit) eine Zahl [0-9] \d
\D alles außer einer Zahl \D
\s (space) whitespace (ein Leerzeichen, ein Tab (per C&P))\s
\S alles außer einem whitespace (kein Leerzeichen, kein Tab) \S
\t (tab) ein Tab (input nur per Copy/Paste)
\T kein Tab (input nur per Copy/Paste)
\w (word) ein Buchstabe, eine Ziffer oder Unterstrich\w
\W kein Buchstabe, Ziffer oder Unterstrich\W
^
$ Endemarker (eigentlich nur für Vorhersagen verwendet.(?=\d{3}$).*
Quanifier
? Metazeichen: einmal oder keinmal[a-z]\d?
+ Metazeichen: einmal oder mehrmals[a-z]\d+
* Metazeichen: keinmal oder mehrmals[a-z]\d*
[ ] { } ( ) * + Metazeichen
{n} Anzahlx{5}
{n,} Anzahl mindestensx{5,}
{0,m}Anzahl höchstensx{0,5}
{n,m}Anzahl mindestens, höchstensx{5,8}
Vorhersagen
?= positive Vorhersage (Eingabe enthält ein digit)(?=\d).
... .. (Eingabe enthält drei digit hintereinander am Anfang)(?=\d{3}).*
... .. (Eingabe enthält drei digit hintereinander irgendwo)(?=.*\d{3}).*
... .. (Eingabe enthält drei digit hintereinander am Ende)(?=.*\d{3}$).*
?! negative Vorhersage (Eingabe enthält nicht ein digit)(?!\d).
.. .. (Eingabe enthält nicht drei digit hintereinander)(?!.*\d{3}).*

Datenschutz

Impressum