HTMLInputElement.pattern — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.pattern

Beschreibung

Die Eigenschaft pattern spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Sie enthält einen regulären Ausdruck als String. Ist das Feld nicht leer und passt der Wert nicht zum Muster, gilt das Feld als ungültig: validity.patternMismatch wird true, die CSS-Pseudoklasse :invalid greift und das Absenden des Formulars wird blockiert.

Das Muster muss auf den gesamten Wert passen. Der Browser umschließt es intern wie ^(?:muster)$, deshalb braucht man weder ^ noch $. Seit Einführung des v-Flags wird das Muster in modernen Browsern mit dem Flag v kompiliert (früher mit u). Es gilt also die strenge Unicode-Syntax.

pattern wirkt nur bei den Typen text, search, url, tel, email und password. Leere Felder werden nicht geprüft. Soll ein Feld Pflicht sein, kombiniert man pattern mit required. Gibt es kein Attribut, liefert die Eigenschaft einen leeren String.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: ein regulärer Ausdruck als String, ohne Schrägstriche und ohne Flags. Wird als Attribut `pattern` übernommen.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs pattern oder ein leerer String, wenn das Attribut fehlt.

Beispiele

Muster auslesen und setzen

// <input id="plz" type="text">
const plz = document.querySelector('#plz');
plz.pattern = '[0-9]{5}';
plz.title = 'Bitte eine fünfstellige Postleitzahl eingeben';

console.log(plz.pattern);
console.log(plz.getAttribute('pattern'));

[0-9]{5} [0-9]{5}

Prüfen mit validity.patternMismatch

const input = document.createElement('input');
input.type = 'text';
input.pattern = '[A-Z]{2}\\d{4}';

input.value = 'AB1234';
console.log(input.validity.patternMismatch); // passt

input.value = 'ab12';
console.log(input.validity.patternMismatch); // passt nicht

input.value = '';
console.log(input.validity.patternMismatch); // leer = keine Prüfung

false true false

Eigene Fehlermeldung bei der Eingabe

// <input id="user" type="text" pattern="[a-z0-9_]{3,16}" required>
const user = document.querySelector('#user');

user.addEventListener('input', () => {
  if (user.validity.patternMismatch) {
    user.setCustomValidity('3–16 Zeichen: Kleinbuchstaben, Ziffern oder _');
  } else {
    user.setCustomValidity('');
  }
});

Muster per JavaScript genauso prüfen

// Mit dem v-Flag wie im Browser prüfen (Fallback: u)
const matchesPattern = (input) => {
  if (!input.pattern || input.value === '') return true;
  const re = new RegExp(`^(?:${input.pattern})$`, 'v');
  return re.test(input.value);
};

const el = document.createElement('input');
el.pattern = '\\d{3}-\\d{4}';
el.value = '555-1234';
console.log(matchesPattern(el));

true

// Wichtig · Fallstricke

Escaping im String: Im JavaScript-String muss der Backslash verdoppelt werden, also '\\d{3}'. Im HTML-Attribut schreibt man dagegen einfach \d{3}.
Das v-Flag ist strenger: Moderne Browser kompilieren das Muster mit dem Flag v. Manche Zeichen, z. B. -, ( oder |, müssen dann in Zeichenklassen escapt werden. [\w-] ist ungültig, richtig ist [\w\-]. Ein ungültiges Muster ignoriert der Browser ohne Fehlermeldung: Das Feld wird dann gar nicht geprüft.
Keine Flags: Flags wie i sind nicht möglich. Groß- und Kleinschreibung deckt man selbst ab, z. B. mit [A-Za-z].
Leere Werte sind gültig: Leere Felder werden nicht geprüft. Für Pflichtfelder zusätzlich required setzen.
Nicht bei allen Typen: Bei number, date und anderen Typen hat pattern keine Wirkung.
Sicherheit: Die Prüfung im Browser dient nur dem Komfort und lässt sich leicht umgehen. Eingaben müssen immer auch auf dem Server geprüft werden.
Barrierefreiheit: Das Muster zusätzlich mit title oder sichtbarem Hilfetext erklären. Browser zeigen title teilweise in der Fehlermeldung an.

Siehe auch

HTMLInputElement HTMLInputElement.validity ValidityState.patternMismatch HTMLInputElement.setCustomValidity() HTMLInputElement.checkValidity() HTMLInputElement.required RegExp