HTML-Attribut: pattern

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

Das pattern-Attribut, wenn es angegeben ist, ist ein regulärer Ausdruck, den der value des Eingabefeldes erfüllen muss, um die Einschränkungsvalidierung zu bestehen. 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 die Art und Weise, wie Zeichenklassen interpretiert werden. Dies ermöglicht Schnitt- und Subtraktionsoperationen von Zeichenklassensätzen und zusätzlich zu ] und \ müssen die folgenden Zeichen mit einem \ Backslash maskiert werden, wenn sie Literalzeichen darstellen: (, ), [, {, }, /, -, |. Vor Mitte 2023 wurde stattdessen das 'u'-Flag angegeben; Wenn Sie älteren Code aktualisieren, erläutert dieses Dokument die Unterschiede.

Der reguläre Ausdruck des Musters muss den gesamten value des Eingabefeldes übereinstimmen, anstatt nur eine Teilzeichenkette zu übereinstimmen - als ob ein ^(?: am Anfang des Musters und )$ am Ende impliziert wäre.

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

Einige der Eingabetypen, die das Musterattribut unterstützen, insbesondere die email und url Eingabetypen, haben erwartete Wertesyntaxen, die übereinstimmen müssen. Wenn das Musterattribut 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 Wert des Eingabefeldes nicht die leere Zeichenkette ist und der Wert nicht den gesamten regulären Ausdruck erfüllt, wird ein Verstoß gegen die Einschränkung gemeldet, indem die Eigenschaft patternMismatch des ValidityState-Objekts wahr ist.

Beim Einfügen eines pattern-Attributs sollten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe der Steuerung bereitstellen. Außerdem sollten Sie ein title-Attribut hinzufügen, das eine Beschreibung des Musters gibt. 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 Benutzerfreundlichkeit für sehende Benutzer verbessert. Außerdem kann Assistenztechnologie den Titel vorlesen, wenn die Steuerung den Fokus erhält, aber dies sollte nicht als Zugänglichkeitsmerkmal angesehen werden.

Nur auf das title-Attribut für die visuelle Anzeige von Textinhalten zu vertrauen, wird nicht empfohlen, da viele Benutzeragenten das Attribut nicht auf zugängliche Weise exponieren. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem title-Attribut fokussiert wird, lässt das Tastatur- und Touch-Benutzer außen vor. Dies ist einer von mehreren Gründen, warum Informationen, die zeigen, wie man die Steuerung so ausfüllt, dass sie die Anforderungen erfüllt, integriert sein müssen.

Da titles von einigen Browsern für die Fehlermeldung verwendet werden, sollten Sie vorsichtig sein, sie nicht so zu formulieren, als ob ein Fehler aufgetreten wäre, da Browser den Titel manchmal auch als Text beim Überfahren anzeigen, er also auch in Nicht-Fehlersituationen erscheint.

Gegeben sei 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 einer impliziten Bezeichnung, die alle drei Komponenten der Telefonnummer umschließt, wobei jeweils 3 Ziffern, 3 Ziffern und 4 Ziffern erwartet werden, wie es durch das auf jedem gesetzten pattern-Attribut definiert ist.

Wenn die Werte zu lang oder zu kurz sind oder Zeichen enthalten, die keine Ziffern sind, wird das patternMismatch wahr sein. Wenn 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 gesehen haben, 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 (sehen Sie sich Validierung mit einem regulären Ausdruck an, um einen einfachen Crashkurs zur Verwendung regulärer Ausdrücke zur Validierung von Eingaben zu erhalten).

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

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