HTML-Attribut: pattern

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

Das pattern-Attribut ist, wenn angegeben, ein regulärer Ausdruck, dem der value des Eingabeelements entsprechen 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 ist.

Der reguläre Ausdruck des Patterns wird mit dem 'v'-Flag kompiliert. Dies macht den regulären Ausdruck unicode-bewusst und ändert auch, wie Zeichenklassen interpretiert werden. Dies ermöglicht Zeichenklassen-Durchschnitts- und Subtraktionsoperationen, und zusätzlich zu ] und \ müssen die folgenden Zeichen mit einem \-Backslash maskiert werden, wenn sie als Literalzeichen dargestellt werden: (, ), [, {, }, /, -, |. Bis Mitte 2023 wurde das 'u'-Flag stattdessen angegeben; Wenn Sie älteren Code aktualisieren, lesen Sie bitte die Referenz zu unicodeSets.

Der reguläre Ausdruck des Patterns muss dem gesamten Eingabewert entsprechen, anstatt einem Substring zu entsprechen - als ob ein ^(?: am Anfang des Patterns und )$ am Ende impliziert wäre.

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

Einige der Eingabetypen, die das Pattern-Attribut unterstützen, insbesondere die Eingabetypen email und url, haben erwartete Wertesyntaxen, die übereinstimmen müssen. Wenn das Pattern-Attribut nicht vorhanden ist und der Wert nicht der erwarteten Syntax für diesen Wertetyp entspricht, ist die schreibgeschützte Eigenschaft typeMismatch des ValidityState-Objekts wahr.

Wenn der Eingabewert nicht die leere Zeichenfolge ist und der Wert nicht dem gesamten regulären Ausdruck entspricht, wird ein Einschränkungsverstoß durch die Eigenschaft patternMismatch des ValidityState-Objekts gemeldet, indem sie true ist.

Wenn Sie ein pattern angeben, sollten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe des Eingabeelements anbringen. Zusätzlich sollten Sie ein title-Attribut einfügen, das eine Beschreibung des Musters liefert. Benutzeragenten können die Inhalte des Titels während der Einschränkungsvalidierung verwenden, um dem Benutzer mitzuteilen, dass das Muster nicht übereinstimmt. Einige Browser zeigen ein Tooltip mit den Titelinhalten an, was die Bedienbarkeit für sehende Benutzer verbessert. Außerdem kann unterstützende Technologie den Titel laut vorlesen, wenn das Steuerelement den Fokus erhält, aber darauf sollte nicht für die Zugänglichkeit vertraut werden.

Es wird davon abgeraten, sich nur auf das title-Attribut zur visuellen Darstellung von Textinhalten zu verlassen, da viele Benutzeragenten das Attribut nicht barrierefrei bereitstellen. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel fokussiert wird, sind Tastatur- und nur-Touch-Benutzer ausgeschlossen. Dies ist einer der Gründe, warum Sie Informationen bereitstellen müssen, die Benutzern mitteilen, wie sie das Steuerelement ausfüllen sollen, um die Anforderungen zu erfüllen.

Da titles von einigen Browsern zur Befüllung von Fehlermeldungen verwendet werden, zeigen sie den Titel manchmal auch als Text beim Hover an. Daher erscheint er in Nicht-Fehlersituationen, also achten Sie darauf, die Titel nicht so zu formulieren, als sei ein Fehler aufgetreten.

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

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

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

Hätte man stattdessen die minlength und maxlength-Attribute verwendet, könnte man sehen, dass validityState.tooLong oder validityState.tooShort wahr sind.

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

Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und verlangt, 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 angezeigt:

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