HTML-Attribut: pattern

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

Wenn das pattern-Attribut angegeben ist, handelt es sich um einen regulären Ausdruck, den der value der Eingabe erfüllen muss, um die Constraint-Validierung zu bestehen. 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 verändert auch die Interpretation von Zeichenklassen. Dies ermöglicht Schnitt- und Subtraktionsoperationen von Zeichenklassensets, und zusätzlich zu ] und \ müssen die folgenden Zeichen bei ihrer wörtlichen Darstellung mit einem \ Backslash maskiert werden: (, ), [, {, }, /, -, |. Vor Mitte 2023 war stattdessen das 'u'-Flag spezifiziert; Falls Sie älteren Code aktualisieren, beschreibt dieses Dokument die Unterschiede.

Der reguläre Ausdruck des Patterns muss mit dem gesamten value der Eingabe übereinstimmen, und nicht mit einem Teilstring - als ob ein ^(?: am Anfang des Patterns und ein )$ am Ende impliziert wären.

Es sollten keine Schrägstriche um den Text des Patterns angegeben werden. Kein regulärer Ausdruck wird angewendet, wenn der Attributwert fehlt, ein leerer String oder ungültig ist.

Einige der Eingabetypen, die das pattern-Attribut unterstützen, insbesondere die Eingabetypen email und url, 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 Wertetyp entspricht, ist die schreibgeschützte typeMismatch-Eigenschaft des ValidityState-Objekts true.

Wenn der Wert der Eingabe nicht der leere String ist und der Wert nicht mit dem gesamten regulären Ausdruck übereinstimmt, wird ein Verletzung des Constraints durch die patternMismatch-Eigenschaft des ValidityState-Objekts gemeldet, die true ist.

Wenn ein pattern enthalten ist, bieten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe der Steuerung an. Zusätzlich fügen Sie ein title-Attribut hinzu, das eine Beschreibung des Musters liefert. Benutzeragenten können den Inhalt des Titels während der Constraint-Validierung verwenden, um dem Benutzer mitzuteilen, dass das Muster nicht übereinstimmt. Einige Browser zeigen beim Titelinhalt ein Tooltip an, was die Benutzerfreundlichkeit für sehende Benutzer verbessert. Zusätzlich kann Technologie zur Unterstützung Behinderter den Titel vorlesen, wenn die Steuerung den Fokus erhält, aber darauf sollte nicht ausschließlich für die Barrierefreiheit vertraut werden.

Nur auf das title-Attribut für die visuelle Anzeige von Textinhalten zu vertrauen, wird nicht empfohlen, da viele Benutzeragenten das Attribut nicht in einer zugänglichen Weise präsentieren. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel gehovt wird, bleiben Tastatur- und Nur-Touch-Benutzer außen vor. Dies ist einer der mehreren Gründe, warum Sie Informationen bereitstellen müssen, die Benutzer darüber informieren, wie sie die Steuerung ausfüllen sollen, um die Anforderungen zu erfüllen.

Während einige Browser titles verwenden, um Fehlermeldungen auszufüllen, wird manchmal der Titel als Text bei Hover angezeigt, und daher erscheint er in nicht-Fehlersituationen, daher achten Sie darauf, Titel nicht so zu formulieren, als ob ein Fehler aufgetreten wäre.

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 Ziffern, 3 Ziffern und 4 Ziffern, wie sie durch das pattern-Attribut festgelegt sind.

Wenn die Werte zu lang oder zu kurz sind oder Zeichen enthalten, die keine Ziffern sind, ist das patternMismatch wahr. 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 wir sehen, dass validityState.tooLong oder validityState.tooShort wahr sind.

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, den der eingegebene Wert erfüllen muss, um als gültig zu gelten (siehe Validierung mit einem regulären Ausdruck für einen kurzen Kurs zur Verwendung regulärer Ausdrücke zur Validierung von Eingaben).

Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und erfordert, dass er nur aus Kleinbuchstaben besteht.

<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:

• Constraint-Validierung
• Formulare: Datenvalidierung
• Reguläre Ausdrücke