[ Input Pattern ]

Formularfelder validieren

  Input pattern Tutorial

Formulare mit HTML5

Eingaben in Formularfelder <input> müssen aus vielerlei Gründen überprüft werden. Zum clientseitigen Prüfen einer Eingabe musste bisher immer aufwendig eine JavaScript-Funktion geschrieben werden. Mit HTML5 gibte es neue Elementtypen, die den Browser veranlassen Prüfungen zu übernehmen.

Für die Typen: <input type="text">, <input type="search">, <input type="url">, <input type="tel">, <input type="email"> und <input type="password"> existiert nun das Elementattribut 'pattern', <input pattern="[0-9]{5}"> mit dem der Browser die Eingabe prüfen kann. Er vergleicht die Eingabe mit dem vom Webseitenbauer erstellten Muster (pattern). 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 das falsch eingegebene Format hin. Weitere Prüfungen müssen natürlich weiterhin zusätzlich clientseitig sowie serverseitig 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 aber nicht das element pattern und werden deshalb in dieses Tutorial nicht weiter erwähnt.

Wichtig ist, den Dokumenttyp auf HTML5 einzustellen. <!DOCTYPE html>. Meine Empfehlung ist unbedingt den Zeichensatz auf UTF-8 einzustellen. <meta charset="UTF-8"> 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. Weitere neue Attribute findest Du z.B. bei w3schools.com

Ein normales Formular zur Abfrage der Postleitzahl:

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

</body>
</html>

Postleitzahl:


Formulare mit CSS3

Der Browser markiert bei einer Eingabe, die nicht auf das vorgegebene Muster (die Schablone) passt, das Input-Feld meist mit einer roten Umrandung. Wir könnten nun mit CSS 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. Dies ist aber dann wohl ein extra Kapitel wert.

/* 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; /*Burlywood*/
}


Grundlagen

Muster

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: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 sin, 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. Geschweiften 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.


HTML5 Formularfelder validieren

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

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. Ob Du Zahlen erlauben willst und versehentlich Buchstaben als Muster eingegeben hast, wie soll man sowas testen? Man muss also prüfen, prüfen, prüfen. Technische Fehler, wie eine fehlende Klammer oder so kann man natürlich noch durch einen Test-Maschine laufen lassen. Einen Pattern Tester im Beta Stadium findest Du im Anhang.


Muster gestalten

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. KFZ-Kennzeichen gibt es nicht mit Kleinbuchstaben. IBAN (DE1212345678901234567890) haben eigentlich keine Leerstellen oder gar Bindestriche, trotzdem - der Mensch ist ein Gewohnheitstier - könnten wir Leerzeichen akzeptieren. (DE12 1234 5678 9012 3456 7890) Oftmals gibt es für die Maschine-Maschine und die Mensch-Maschine auch unterschiedliche Regeln. Meist ist es für den User einfacher, bei der Eingabe Leerzeichen oder Groß/Kleinschreibung [A-Za-z] einzugeben. 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

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. Hallo Welt ist bereits ein einfaches Muster, das vom Browser als Vergleich mit der Eingabe des Users benutzt wird. Es wird nur diese Buchstabenkombination akzeptiert. Bei Sonderzeichen '§§15 & 16' und Zahlen gilt natürlich dasselbe: 0815. Auch das brauchen wir einfach nur so hinzuschreiben.

Großbuchstabe A Format: A
<input type="text" pattern="A">

A
A
A
a
B
5

Wortgruppe Hallo Welt Format: Xxxxx Xxxx
<input type="text" pattern="Hallo Welt">

Hallo Welt
Hallo Welt
Hello World
HalloWelt

Zahle 0815 Format: nnnn
<input type="text" pattern="0815">

0815 0816

Zeichenauswahl

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

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

Großbuchstabe Format: X
<input type="text" pattern="[ABCD]">

A
B
C
D
E
H
U
Z

Buchstaben, keine Sonderzeichen Format: X oder x
<input type="text" pattern="[A-zÄÖÜäöüß]">

A
k
ö
ß
1
6
&
#

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

0
1
7
3
5
6

Unicode Tabelle

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 das D, dann... wir können also [A-Z] oder [0-9] schreiben wenn alle Zeichen dazwischen auch gemeint sind. In der Unicode-Tabelle sind die Groß- und Kleinbuchstaben nicht direkt hintereinander. Die Reihenfolge ist ..XYZ[\]^_`abc.. Somit beinhaltet[Az] 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.

Den Bereich rückwärts anzugeben funktioniert übrigens nicht. [Z-A] oder [9-0] sind ungültig und werden ignoriert.

Unicode Schriftsysteme

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

Interessant ist, dass die griechische Tabelle in der Reihenfolge vor der lateinischen Zusatz-Erweiterung kommt. Dies sollte man bedenken.


Zeichen ausschließ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

5 Sonderzeichen Format: $$$$$
<input type="text" pattern="[^A-zÄÖÜäöüß0-9]{5}">

&§*'/
!°?},
(/%T&=
:[3];

Zeichenauswahl mit mehreren Elementen

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

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

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}.

Postleitzahl 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

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

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

<input type="text" pattern="Kaffee|Tee|Glühwein">

Kaffee
Tee
Glühwein
Expresso
Punsch
Glühbier

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

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


Zeichen gruppieren

Die runde Klammer ( ) wird verwendet, um längere zusammengehörige Ausdrücke zu markieren. Die Eingabe eines afrikanischen Gerichtes lässt sich also so bemustern: (Kus){2} . Die geschweifte Klammer bezieht sich auf den letzten Ausdruck, also den Inhalt der runden Klammer. Ohne die runde Klammer haben wir nur eine Verdoppelung des letzten Buchstabens. Kus{2}

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

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

couscous cous cous

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

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

<input type="text" pattern="Kus{2}">
-->

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
Wer den Fehler findet, darf ihn behalten

Das folgende Muster sieht doch ziemlich gut aus und für den Browser stimmen alle denkbaren Eingaben mit dem vorgegebenen Muster überein und er wird sie zur Weiterverarbeitung freigeben! Das ist aber nicht das, was wir eigentlich wollten.
<input type="text" pattern="(Roi|Rooi)bos|Roibush|(Rot|Roi)busch|Massai)tee">
Also testen testen testen...Mit meinem Pattern-Tester hast du den Fehler blitzschnell gefunden!


Verweise

Eine weitere Funktion der runden Klammern ist, dass wir mit maskierten Zahlen /1 /2 /3usw. auf auf unsere Gruppen zugreifen können. Die Zahl verweist auf die aufnehmende Klammer in genau der Reihenfolge, die Du angelegt hast.
Ein Beispiel: Kinder sprechen erstmal eine einfache Sprache, die meist aus Doppelung von Silben besteht. (mama, papa, popo, pipi, lala). (\w)(\w)\1\2 ist das Muster dazu. Die \1 verweist auf den Inhalt der ersten Klammer, \2 auf den Inhalt der zweiten Klammer. Die Eingabe des dritten Buchstabens muss also gleich lauten wie die des Ersten, die des 4ten gleich wie die des 2ten.
Noch ein Beispiel. Du hast eine 9stellige TypTeileNummer von Irgendwas. In 3er Blöcken: 123.456.789. \d{3}\d{3}\d{3} Als Trenner darfst Du den Punkt .oder ein Leerzeichen nehmen. = \d{3}[ .]?\d{3}[ .]?\d{3} Aber auf keinen Fall gemischt! Der Verweis auf den wiederholten Inhalt einer runden Klammer regelt das.\d{3}( |\.)?\d{3}\1\d{3}. Du musst dann die Alternativen mit dem Pipezeichen |setzen und die eckigen Klammern weglassenden ( |\.). Der Punkt muß maskiert werden. \..

Klammer ausschließ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 Die maskierte 2 verweist auf die erste Klammer die freigegeben ist, in diesem Fall also auf die Klammer drei. Das heißt, die Eingabe wird vom Browser nur akzeptiert, wenn der 3te und 5te Zeichen indentisch ist.

Doppelung (mama papa popo pipi lala..)Format: xyxy oder XnXn oder ..
<input type="text" pattern="(\w)(\w)\1\2">

mama
PaPa
lala
1212
mami
Papa
Lilo
1232

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

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

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

Na2O2
22222
Na2O3
22322


Zeichen mit besonderer Bedeutung

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?">
<input type="text" pattern="Wasser\?">

Wasser?
Wasser?
Wasser
Wasser\?

Dein exaktes Jahreseinkommen in Dollar und Cent:Format: n$ oder nnnnn.nn$
<input type="text" pattern="[0-9]+(\.[0-9]{2})?\$">

20$
20.00$
2000$
20.00
20.00€
2.000$

Vordefinierte (Meta)Zeichen

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

Positive Vorhersagen

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.
Beispiel: Die Vorhersage zusammen mit dem eigentichen Muster (?=.{5}$)[A-Z]* sagt aus, dass die Eingabe 5 Gruß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

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

Rückschauende Aussagen

Rückschauende (look-behind) Behauptungen wie in anderen Programiersprachen haben wir für die Input Pattern nicht, weil schon Javascript RegExp dies nicht bietet.


Zusammenfassung

Übersichtstabelle

[ ] Auswahl vom Zeichen
( ) Gruppe von Zeichen
^ keines der Zeichen innerhalb [ ]
A-Z ein Buchstaben groß A-Z
a-z ein Buchstaben klein a-z
A-z ein Buchstaben A-Za-z und [\]^_`
À-Ü Ä Ö Ü Ç É Õ
ß-ü ß ä ö ü é æ c ̧
" " ein Leerzeichen
%$§"... .. Sonderzeichen
0-9 eine Zahl 0-9
\d (digit) eine Zahl [0-9]
\D keine Zahl [^0-9] | [^\d]
\w (word) ein Buchstabe, eine Ziffer oder Unterstrich
\W kein Buchstabe, Ziffer oder Unterstrich [^A-Za-z_0-9]
\1 \2 Verweis auf Klammer
?: von Verweis ausschliesen (?:x)
?= positive Vorhersage (ist) (?=.{8})
?! negative Vorhersage (ist nicht) (?!.{8})
\s whitespace (ein Leerzeichen, ein Tab (per C&P))
\S kein whitespace [^\s]
\t ein Tab (nur per C&P zu erreichen)
. (Punkt) ein beliebiges Zeichen
\ maskieren
| oder
- Auswahlbereich von-bis innerhalb [ ]
? einmal oder keinmal
{0,1} einmal oder keinmal
+ einmal oder mehrmals
{1,} einmal oder mehrmals
* keinmal oder mehrmals
{0,} keinmal oder mehrmals
{5} genau 5-mal
{5,} mindestens 5-mal
{0,5} höchstens 5-mal
{2,5} mindestens 2-mal, höchstens 5-mal

Häufige Fehler

(?<= ..) Positive Lookbehind gibt es nicht!
(?<! ..) Negative Lookbehind gibt es nicht!
\r
 
carriage return gibt es nicht!
Falls mit paste eingefügt = <space>
\n
 
newline gibt es nicht!
Falls mit paste eingefügt = <space>

Ohne testen

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?


Nur kopiert

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 anderen Sprachen! Allerdings gibt es auch einige von JS abweichende Regeln. 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 pattern angepasst werden.
Leider hab ich auch eine pattern Sammlung gefunden die mit sehr vielen schlechten Beispielen glänzt. Jeder darf da etwas einstellen, geprüft und bewertet wird offenbar nicht. Mit der eigentlich guten Idee hat der Betreiber der Web-Welt damit nur begrenzt einen Gefallen getan.