regextester.NET

Reguläre Ausdrücke in HTML5

HTML5 führt einige Neuerungen für Formulare ein, die in der Vergangenheit nur mittels JavaScript emuliert werden konnten. Für häufig verwendete Eingabeformate wurden neue Eingabetypen wie email, url und number eingeführt. Um selbst auf Eingabeformate clientseitig vom Browser ohne JavaScript prüfen zu lassen, wurde das Attribut pattern eingeführt, das als Inhalt einen regulären Ausdruck erwartet:

<input pattern="regexp" />

Anwendung und Besonderheiten von pattern

Mit ihm ist, wenn man mit regulären Ausdrücken vertraut ist, sehr einfach zu arbeiten. Zu beachten ist, daß die Begrenzer wegfallen:

<input pattern="\d5" /> => prüft auf deutsche Postleitzahlen

Um Benutzer eines Formulars auf das erweiterte Eingabeformat hinzuweisen, empfiehlt sich das Attribut title:

<input pattern="\d5" title="Bitte geben Sie Ihre PLZ im Format 12345 ein." /> => prüft auf deutsche Postleitzahlen

Da sich das Attribut pattern auf einzeilige Eingaben bezieht, muß auch nicht auf etwa Zeilenanfang oder -ende geprüft werden. Das Suchmuster

pattern="\d5"

paßt ausschließlich auf Eingaben, die aus fünf Ziffern bestehen, Eingaben wie

012345
123456
a12345
12345b

führen zu einer Fehlermeldung, und ein Absenden des Formulars wird verhindert.

Browserunterstützung von pattern

Die Unterstützung von pattern ist derzeit noch nicht in jedem Anzeigegerät gegeben, ein Einsatz lohnt sich aber bereits:

input-Feld mit pattern mittels CSS 3 formatieren

CSS 3 führt einige neue Pseudoklassen ein. Für die Arbeit mit dem Attribut pattern kann man auf folgende zurückgreifen:

• valid
• invalid

Beispiel:

HTML:
<input pattern="\d5" title="Bitte geben Sie Ihre PLZ im Format 12345 ein." />
<div class="afterInput"></div>

CSS:
input:invalid
{
    border: 1px dotted #F00;
    background-color: #FF0;
}

input:valid ~ .afterInput:before
{
    color: #0F0;
    content: '✓';
}