pattern HTML-Attribut

Probieren Sie es aus

<label for="username">Username: (3-16 characters)</label>
<input
  id="username"
  name="username"
  type="text"
  value="Sasha"
  pattern="\w{3,16}"
  required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}

Überblick

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

Das pattern-Attribut, wenn angegeben, ist ein regulärer Ausdruck, den der value der Eingabe erfüllen 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 die Interpretation von Zeichenklassen. Dies ermöglicht Schnittmengen- und Subtraktionsoperationen von Zeichenklassensätzen, und zusätzlich zu ] und \ müssen die folgenden Zeichen mit einem \-Backslash maskiert werden, wenn sie literale Zeichen darstellen: (, ), [, {, }, /, -, |. Vor Mitte 2023 wurde stattdessen das 'u'-Flag verwendet; wenn Sie älteren Code aktualisieren, lesen Sie die unicodeSets-Referenz.

Der reguläre Ausdruck des Musters muss zum gesamten value der Eingabe passen und nicht nur zu einem Teilstring, als ob ein ^(?: am Anfang des Musters und ein )$ am Ende impliziert wären.

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

Einige der Eingabetypen, die das pattern-Attribut unterstützen, insbesondere die email- und url-Eingabetypen, haben erwartete Werte-Syntaxen, die erfüllt 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 typeMismatch-Eigenschaft des ValidityState-Objekts true sein.

Einschränkungsvalidierung

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

Benutzerfreundlichkeit und Zugänglichkeitsüberlegungen

Beim Einschließen eines pattern sollten Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe der Steuerung bereitstellen. Fügen Sie außerdem ein title-Attribut hinzu, 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 Tooltipp mit den Titelinhalten, was die Benutzerfreundlichkeit für sehende Benutzer verbessert. Darüber hinaus kann unterstützende Technologie den Titel beim Fokuserhalt der Steuerung laut vorlesen, dies sollte jedoch nicht für die Barrierefreiheit als allein ausreichend betrachtet werden.

Nur auf das title-Attribut für die visuelle Darstellung von Textinhalten zu setzen, wird nicht empfohlen, da viele Benutzeragenten das Attribut nicht auf zugängliche Weise bereitstellen. Obwohl einige Browser einen Tooltipp anzeigen, wenn ein Element mit einem Titel überflogen wird, werden Tastatur- und Touch-Only-Benutzer ausgeschlossen. Dies ist einer der mehreren Gründe, warum Sie Informationen bereitstellen müssen, um Benutzer darüber zu informieren, wie die Steuerung ausgefüllt werden muss, um die Anforderungen zu erfüllen.

Während einige Browser titles verwenden, um Fehlermeldungen zu generieren, da Browser manchmal auch den Titel als Text beim Überfliegen anzeigen, wird er daher in Nicht-Fehlersituationen angezeigt. Seien Sie also vorsichtig, Titel nicht so zu formulieren, als ob ein Fehler aufgetreten wäre.

Beispiele

Übereinstimmung einer Telefonnummer

Gegebenes Beispiel:

<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 Sektionen 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 durch das pattern-Attribut festgelegt.

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

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

Hätten wir stattdessen die minlength- und maxlength-Attribute verwendet, hätten wir möglicherweise gesehen, dass validityState.tooLong oder validityState.tooShort true sind.

Spezifikation eines Musters

Sie können das pattern-Attribut verwenden, um einen regulären Ausdruck zu spezifizieren, dem der eingegebene Wert entsprechen muss, um als gültig betrachtet zu werden (sehen Sie Validation gegen einen regulären Ausdruck für ein Schnellsprung-buch zur Nutzung regulärer Ausdrücke zur Validierung von Eingaben).

Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und erfordert, dass es 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: #999999;
}

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 folgendermaßen dargestellt:

Spezifikationen

Browser-Kompatibilität

Siehe auch

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