HTML-Attribut pattern

Probieren Sie es aus

<label for="username">Username: (3-16 characters)</label>
<input
  id="username"
  name="username"
  type="text"
  value="Sasha"
  pattern="\w{3,16}"
  required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}

Überblick

Das Attribut pattern kann für die Input-Typen text, tel, email, url, password und search verwendet werden.

Wenn das Attribut pattern angegeben ist, enthält es einen regulären Ausdruck, mit dem der value des Eingabefelds übereinstimmen muss, damit der Wert die Gültigkeitsprüfung besteht. Der Ausdruck muss ein gültiger regulärer JavaScript-Ausdruck sein, wie er vom Typ RegExp verwendet und in unserem Leitfaden zu regulären Ausdrücken beschrieben wird.

Der reguläre Ausdruck des Musters wird mit dem Flag 'v' kompiliert. Dadurch wird der reguläre Ausdruck Unicode-fähig; außerdem ändert sich die Interpretation von Zeichenklassen. Das ermöglicht Schnittmengen- und Differenzoperationen mit Zeichenklassen. Zusätzlich zu ] und \ müssen die folgenden Zeichen mit einem Backslash \ maskiert werden, wenn sie wörtliche Zeichen darstellen: (, ), [, {, }, /, -, |. Vor Mitte 2023 war stattdessen das Flag 'u' vorgesehen. Wenn Sie älteren Code aktualisieren, lesen Sie die Referenz zu unicodeSets.

Der reguläre Ausdruck des Musters muss mit dem gesamten value des Eingabefelds übereinstimmen, nicht nur mit einer Teilzeichenfolge – so, als stünde am Anfang des Musters implizit ^(?: und am Ende )$.

Der Mustertext darf nicht von Schrägstrichen umgeben sein. Wenn das Attribut fehlt oder sein Wert eine leere Zeichenfolge oder ungültig ist, wird kein regulärer Ausdruck angewendet.

Einige der Input-Typen, die das Attribut pattern unterstützen, insbesondere email und url, erwarten eine bestimmte Syntax für ihren Wert. Wenn das Attribut pattern fehlt und der Wert nicht der erwarteten Syntax des jeweiligen Werttyps entspricht, ist die schreibgeschützte Eigenschaft typeMismatch des ValidityState-Objekts true.

Gültigkeitsprüfung

Wenn der Wert des Eingabefelds keine leere Zeichenfolge ist und nicht mit dem gesamten regulären Ausdruck übereinstimmt, liegt eine Verletzung der Gültigkeitsbedingungen vor. Dies wird dadurch angezeigt, dass die Eigenschaft patternMismatch des ValidityState-Objekts true ist.

Hinweise zur Benutzerfreundlichkeit und Barrierefreiheit

Wenn Sie ein pattern verwenden, beschreiben Sie das Muster in sichtbarem Text in der Nähe des Eingabefelds. Fügen Sie außerdem ein title-Attribut hinzu, das das Muster beschreibt. Benutzeragenten können dessen Inhalt bei der Gültigkeitsprüfung verwenden, um darauf hinzuweisen, dass der Wert nicht mit dem Muster übereinstimmt. Einige Browser zeigen den Inhalt als Tooltip an, was die Benutzerfreundlichkeit für sehende Nutzer verbessert. Assistive Technologien können den Titel außerdem vorlesen, wenn das Eingabefeld den Fokus erhält. Für die Barrierefreiheit sollten Sie sich jedoch nicht darauf verlassen.

Es wird davon abgeraten, Textinformationen ausschließlich über das Attribut title visuell bereitzustellen, da viele Benutzeragenten das Attribut nicht auf barrierefreie Weise zugänglich machen. Einige Browser zeigen zwar einen Tooltip an, wenn der Mauszeiger über einem Element mit einem Titel verweilt, doch Nutzer, die ausschließlich eine Tastatur oder einen Touchscreen verwenden, erreichen diese Information nicht. Auch deshalb müssen Sie Informationen bereitstellen, die erklären, wie das Eingabefeld entsprechend den Anforderungen auszufüllen ist.

Manche Browser verwenden title-Attribute für Fehlermeldungen. Da sie den Titel mitunter auch beim Darüberfahren mit der Maus anzeigen, erscheint er jedoch ebenfalls, wenn kein Fehler vorliegt. Formulieren Sie Titel daher nicht so, als sei bereits ein Fehler aufgetreten.

Beispiele

Eine Telefonnummer abgleichen

Betrachten Sie Folgendes:

<p>
  <label>
    Enter your phone number in the format (123) - 456 - 7890 (<input
      name="tel1"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit area code"
      size="2" />) -
    <input
      name="tel2"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit prefix"
      size="2" />
    -
    <input
      name="tel3"
      type="tel"
      pattern="[0-9]{4}"
      placeholder="####"
      aria-label="4-digit number"
      size="3" />
  </label>
</p>

Hier gibt es drei Abschnitte für eine nordamerikanische Telefonnummer. Eine implizite Beschriftung umfasst alle drei Bestandteile der Telefonnummer. Erwartet werden jeweils 3, 3 und 4 Ziffern, wie durch das für jeden Abschnitt festgelegte Attribut pattern definiert.

Wenn die Werte zu lang oder zu kurz sind oder andere Zeichen als Ziffern enthalten, ist patternMismatch true. In diesem Fall entspricht das Element der CSS-Pseudoklasse :invalid.

input:invalid {
  border: red solid 3px;
}

Hätten wir stattdessen die Attribute minlength und maxlength verwendet, wäre möglicherweise validityState.tooLong oder validityState.tooShort true.

Ein Muster festlegen

Mit dem Attribut pattern können Sie einen regulären Ausdruck festlegen, mit dem der eingegebene Wert übereinstimmen muss, um als gültig zu gelten. Eine kurze Einführung in die Verwendung regulärer Ausdrücke zur Überprüfung von Eingaben finden Sie unter Validierung anhand eines regulären Ausdrucks.

Das folgende Beispiel beschränkt den Wert auf 4 bis 8 Zeichen und verlangt, dass er ausschließlich Kleinbuchstaben enthält.

<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}"
      title="4 to 8 lowercase letters" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Das Ergebnis sieht so aus:

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Gültigkeitsprüfung
• Formulare: Validierung von Formulardaten
• Reguläre Ausdrücke