HTML-Attribut: pattern

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

Das pattern-Attribut, wenn es festgelegt ist, ist ein regulärer Ausdruck, dem der value der Eingabe 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 in unserem Leitfaden zu regulären Ausdrücken dokumentiert ist.

Der reguläre Ausdruck des Musters wird mit dem 'v'-Flag kompiliert. Dies macht den regulären Ausdruck unicode-bewusst und ändert auch, wie Zeichengruppen interpretiert werden. Dies ermöglicht Schnittmengen- und Subtraktionsoperationen mit Zeichengruppen, und zusätzlich zu ] und \ müssen die folgenden Zeichen, wenn sie für wörtliche Zeichen stehen, mit einem \-Rückwärtsschrägstrich maskiert werden: (, ), [, {, }, /, -, |. Vor Mitte 2023 wurde stattdessen das 'u'-Flag verwendet; Wenn Sie älteren Code aktualisieren, erläutert dieses Dokument die Unterschiede.

Der reguläre Ausdruck des Musters muss mit dem gesamten value der Eingabe übereinstimmen, anstatt mit einer Unterzeichenfolge übereinzustimmen - als ob ein ^(?: am Anfang 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 Zeichenfolge ist oder ungültig ist.

Einige der Eingabetypen, die das pattern-Attribut unterstützen, insbesondere die Eingabetypen email und url, haben erwartete Wertsyntaxen, die eingehalten werden müssen. Wenn das pattern-Attribut nicht vorhanden ist und der Wert nicht der erwarteten Syntax für diesen Werttyp entspricht, wird die schreibgeschützte Eigenschaft typeMismatch des ValidityState-Objekts wahr sein.

Wenn der Wert der Eingabe nicht die leere Zeichenfolge ist und der Wert nicht dem gesamten regulären Ausdruck entspricht, wird eine Einschränkungsverletzung angezeigt, da die patternMismatch-Eigenschaft des ValidityState-Objekts true ist.

Wenn ein pattern enthalten ist, geben Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe der Steuerung an. Fügen Sie außerdem ein title-Attribut hinzu, das eine Beschreibung des Musters enthält. Benutzeragenten können die Titelinhalte 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 Nutzbarkeit für sehende Benutzer verbessert. Darüber hinaus kann unterstützende Technologie den Titel vorlesen, wenn die Steuerung den Fokus erhält, aber darauf sollte nicht ausschließlich für die Barrierefreiheit vertraut werden.

Es wird davon abgeraten, sich nur auf das title-Attribut für die visuelle Darstellung von Textinhalten zu verlassen, da viele Benutzeragenten das Attribut nicht auf zugängliche Weise verfügbar machen. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel gehov. wird, werden somit Tastatur- und Touch-Benutzer ausgeschlossen. Dies ist einer der Gründe, warum Sie Informationen bereitstellen müssen, die Benutzern mitteilen, wie sie die Steuerung ausfüllen müssen, um den Anforderungen zu entsprechen.

Da einige Browser titles verwenden, um Fehlermeldungen zu generieren, während die Titel manchmal auch als Text beim Hover angezeigt werden, werden sie auch in Nicht-Fehlersituationen angezeigt. Daher sollte darauf geachtet werden, die Titel nicht so zu artikulieren, 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 3 Abschnitte für eine nordamerikanische Telefonnummer mit einem impliziten Label, das alle drei Komponenten der Telefonnummer umfasst, und erwarten jeweils 3-stellige, 3-stellige und 4-stellige Nummern, wie sie durch das pattern-Attribut auf jedem Abschnitt definiert sind.

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

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

Wenn wir stattdessen die Attribute minlength und maxlength verwendet hätten, könnten validityState.tooLong oder validityState.tooShort wahr sein.

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

Das folgende Beispiel schränkt den Wert auf 4–8 Zeichen ein 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 gerendert:

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