HTML-Attribut: pattern

Das pattern-Attribut ist ein Attribut der Eingabetypen text, tel, email, url, password und search.

Das pattern-Attribut, wenn spezifiziert, ist ein regulärer Ausdruck, den der value des Eingabefeldes erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger JavaScript-regulärer Ausdruck sein, wie er vom RegExp-Typ verwendet wird, und wie in unserem Leitfaden zu regulären Ausdrücken dokumentiert.

Der reguläre Ausdruck des Musters wird mit dem 'v'-Flag kompiliert. Dies macht den regulären Ausdruck unicode-bewusst und ändert auch die Art und Weise, wie Zeichenklassen interpretiert werden. Dies erlaubt Schnitt- und Subtraktionsoperationen von Zeichenklassenmengen. Neben ] und \ müssen die folgenden Zeichen mit einem \-Backslash maskiert werden, wenn sie als literale Zeichen dargestellt werden sollen: (, ), [, {, }, /, -, |. Vor Mitte 2023 wurde stattdessen das 'u'-Flag festgelegt; Wenn Sie älteren Code aktualisieren, dokumentiert dieses Dokument die Unterschiede.

Der reguläre Ausdruck des Musters muss zum gesamten value des Eingabefeldes passen, anstatt zu einem Teilstring – als ob ein ^(?: am Start des Musters und ein )$ am Ende impliziert wäre.

Es sollten keine Schrägstriche um den Mustertext angegeben werden. Kein regulärer Ausdruck wird angewendet, wenn der Attributwert fehlt, eine leere Zeichenkette ist oder ungültig ist.

Einige der Eingabetypen, die das pattern-Attribut unterstützen, insbesondere die email- und url-Eingabetypen, haben erwartete Wertsyntaxen, die erfüllt werden müssen. Wenn das pattern-Attribut nicht vorhanden ist und der Wert nicht der erwarteten Syntax für diesen Werttyp entspricht, ist die typeMismatch-Eigenschaft des ValidityState-Objekts auf true gesetzt.

Wenn der Wert des Eingabefeldes nicht die leere Zeichenkette ist und der Wert nicht dem gesamten regulären Ausdruck entspricht, wird eine Einschränkungsverletzung gemeldet, indem die patternMismatch-Eigenschaft des ValidityState-Objekts auf true gesetzt wird.

Wenn Sie ein pattern einfügen, sollten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe des Kontrollfeldes bereitstellen. Außerdem sollten Sie ein title-Attribut einfügen, welches eine Beschreibung des Musters liefert. Benutzeragenten können den Titelinhalt während der Einschränkungsvalidierung verwenden, um dem Benutzer mitzuteilen, dass das Muster nicht erfüllt ist. Einige Browser zeigen ein Tooltip mit den Titelinhalten an, was die Benutzerfreundlichkeit für sehende Benutzer verbessert. Zusätzlich kann assistive Technologie den Titel vorlesen, wenn das Kontrollfeld den Fokus erhält. Darauf sollte jedoch nicht ausschließlich für die Barrierefreiheit vertraut werden.

Nur auf das title-Attribut für die visuelle Darstellung von Textinhalten zu vertrauen, wird nicht empfohlen, da viele Benutzeragenten das Attribut nicht auf eine zugängliche Weise darstellen. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel überfahren wird, lässt dies Tastatur- und nur touchfähige Benutzer außen vor. Aus diesen und mehreren anderen Gründen muss zusätzliche Information bereitgestellt werden, die den Benutzern erklärt, wie sie das Kontrollfeld ausfüllen müssen, um die Anforderungen zu erfüllen.

Während titles von einigen Browsern verwendet werden, um Fehlermeldungen zu bevölkern, werden Titel manchmal auch als Text bei Hover angezeigt, daher erscheinen sie auch in Nicht-Fehlersituationen. Deshalb sollten Titel vorsichtig formuliert werden, sodass sie nicht so wirken, als sei ein Fehler aufgetreten.

Angenommen die folgende Situation:

<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 haben wir drei Abschnitte für eine nordamerikanische Telefonnummer mit einem impliziten Label, das alle drei Komponenten der Telefonnummer umfasst, und erwarten jeweils 3 Ziffern, 3 Ziffern und 4 Ziffern, wie es durch das pattern-Attribut festgelegt ist.

Wenn die Werte zu lang oder zu kurz sind oder Zeichen enthalten, die keine Ziffern sind, wird patternMismatch auf true gesetzt. Wenn true, entspricht das Element den :invalid CSS-Pseudoklassen.

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

Hätten wir die Attribute minlength und maxlength stattdessen benutzt, könnten wir validityState.tooLong oder validityState.tooShort als true gesehen haben.

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck festzulegen, den der eingegebene Wert erfüllen muss, um als gültig betrachtet zu werden (siehe Validierung gegen einen regulären Ausdruck für einen Kurzlehrgang zur Verwendung von regulären Ausdrücken zur Validierung von Eingaben).

Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und erfordert, dass er nur 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>

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

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

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

Dies wird wie folgt dargestellt:

• Einschränkungsvalidierung
• Formulare: Datenformularvalidierung
• Reguläre Ausdrücke