HTML-Attribut: pattern

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

Das pattern-Attribut, wenn es spezifiziert ist, ist ein regulärer Ausdruck, den der value des Eingabefelds erfüllen muss, damit der Wert die Einschränkungsvalidierung besteht. Es muss ein gültiger regulärer JavaScript-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. Dadurch wird der reguläre Ausdruck unicode-fähig und verändert außerdem die Interpretation von Zeichenklassen. Dies erlaubt Schnittmengen- und Subtraktionsoperationen in Zeichenklassen, und zusätzlich zu ] und \ müssen die folgenden Zeichen, wenn sie literale Zeichen darstellen, mit einem \ Backslash maskiert werden: (, ), [, {, }, /, -, |. Vor Mitte 2023 war das 'u'-Flag stattdessen vorgesehen; wenn Sie älteren Code aktualisieren, legt dieses Dokument die Unterschiede dar.

Der reguläre Ausdruck des Musters muss dem gesamten value des Eingabefelds entsprechen, anstatt einem Teilstring zu entsprechen – als ob ein ^(?: am Anfang des Musters und )$ am Ende impliziert wäre.

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

Einige der Eingabetypen, die das pattern-Attribut unterstützen, insbesondere die Eingabetypen email und url, haben erwartete Wertesyntaxen, 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, wird die typeMismatch-Eigenschaft des schreibgeschützten ValidityState-Objekts auf true gesetzt.

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

Wenn Sie ein pattern angeben, sollten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe der Steuerung bereitstellen. Zusätzlich sollten Sie ein title-Attribut einschließen, das eine Beschreibung des Musters liefert. 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 Benutzbarkeit für sehende Benutzer verbessert. Darüber hinaus kann unterstützende Technologie den Titel vorlesen, wenn die Steuerung den Fokus erhält, aber dies sollte nicht als zugänglichkeitsrelevant angesehen werden.

Es wird davon abgeraten, ausschließlich auf das title-Attribut für die visuelle Darstellung von Textinhalten zurückzugreifen, da viele Benutzeragenten das Attribut nicht auf zugängliche Art und Weise bereitstellen. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel schwebt, werden dadurch Tastatur- und Nur-Touch-Benutzer ausgelassen. Dies ist einer der mehreren Gründe, warum Sie Informationen bereitstellen müssen, die Benutzer darüber informieren, wie die Steuerung ausgefüllt werden soll, um die Anforderungen zu erfüllen.

Während die titles von einigen Browsern zur Erstellung von Fehlermeldungen verwendet werden, da Browser manchmal auch den Titel als Text beim Überfahren anzeigen, erscheint er daher in Nicht-Fehlersituationen, weshalb Sie darauf achten sollten, Titel nicht so zu formulieren, als ob ein Fehler aufgetreten wäre.

Unter Berücksichtigung des Folgenden:

<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, wobei erwartet wird, dass es sich um jeweils 3, 3 und 4 Ziffern handelt, wie im pattern-Attribut für jede Komponente festgelegt.

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

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

Wenn wir stattdessen die Attribute minlength und maxlength verwendet hätten, könnten wir möglicherweise sehen, dass validityState.tooLong oder validityState.tooShort wahr sind.

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck anzugeben, dem der eingegebene Wert entsprechen muss, um als gültig angesehen zu werden (siehe Überprüfung gegen einen regulären Ausdruck für einen Schnellkurs über die Verwendung von regulären Ausdrücken zur Überprüfung 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