Baseline Widely available
Das pattern Attribut spezifiziert einen regulären Ausdruck, dem der Wert des Formularelements entsprechen sollte. Wenn ein Wert ungleich null nicht den durch das pattern Attribut festgelegten Einschränkungen entspricht, wird die schreibgeschützte Eigenschaft patternMismatch des ValidityState-Objekts auf true gesetzt.
<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;
}
Das pattern Attribut ist ein Attribut der Input-Typen text, tel, email, url, password und search.
Wenn das pattern Attribut angegeben ist, handelt es sich um einen regulären Ausdruck, dem der value des Eingabefeldes entsprechen 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 Interpretation von Zeichenklassen. Dies ermöglicht Schnittmengen- und Subtraktionsoperationen für Zeichenklassen, und zusätzlich zu ] und \ müssen folgende Zeichen mit einem \ Backslash maskiert werden, wenn sie als Literalzeichen fungieren: (, ), [, {, }, /, -, |. 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 den gesamten value des Eingabefeldes entsprechen, anstatt ein Teilstring zu treffen - als ob ein ^(?: am Anfang des Musters und ein )$ am Ende impliziert wäre.
Es sollten keine Schrägstriche um den Mustertest angegeben werden. Kein regulärer Ausdruck wird angewendet, wenn der Attributwert fehlt, ein leerer String oder ungültig ist.
Einige der Eingabetypen, die das Musterattribut unterstützen, insbesondere die Eingabetypen email und url, haben erwartete Wertsyntaxe, die eingehalten werden müssen. Wenn das Musterattribut nicht vorhanden ist und der Wert nicht der erwarteten Syntax für diesen Wertetyp entspricht, wird die schreibgeschützte Eigenschaft typeMismatch des ValidityState-Objekts auf true gesetzt.
Wenn der Wert des Eingabefeldes nicht der leere String ist und der Wert nicht dem gesamten regulären Ausdruck entspricht, wird durch die Eigenschaft patternMismatch des ValidityState-Objekts auf true eine Einschränkungsverletzung gemeldet.
Hinweis: Wenn das pattern Attribut ohne Wert angegeben ist, ist sein Wert implizit der leere String. Daher wird jeder nicht leere Eingabewert zu einer Verletzung der Einschränkung führen.
Wenn Sie ein pattern angeben, stellen Sie eine Beschreibung des Musters in sichtbarem Text in der Nähe des Eingabefeldes bereit. 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 Tooltip mit den Titelinhalten an, was die Benutzerfreundlichkeit für sehende Benutzer verbessert. Zusätzlich kann unterstützende Technologie den Titel vorlesen, wenn das Steuerelement den Fokus erhält, aber dies sollte nicht als Barrierefreiheitshilfe 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 barrierefreie Weise zugänglich machen. Obwohl einige Browser ein Tooltip anzeigen, wenn ein Element mit einem Titel überfahren wird, werden Tastatur- und Touch-Nutzer ausgeschlossen. Dies ist einer der mehreren Gründe, warum Sie Informationen bereitstellen müssen, die Benutzer darüber informieren, wie das Steuerelement ausgefüllt werden muss, um die Anforderungen zu erfüllen.
Da titles von einigen Browsern verwendet werden, um Fehlermeldungen zu erzeugen, und da Browser manchmal auch den Titel als Text beim Ãberfahren anzeigen, wird er daher in Nicht-Fehlersituationen angezeigt. Seien Sie deshalb vorsichtig, Titel nicht so zu formulieren, als ob ein Fehler aufgetreten ist.
Unter der Annahme 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 drei Abschnitte für eine nordamerikanische Telefonnummer mit einem impliziten Label, das alle drei Komponenten der Telefonnummer umfasst, wobei jeweils 3, 3 und 4 Ziffern erwartet werden, wie durch das pattern Attribut definiert.
Wenn die Werte zu lang oder zu kurz sind oder Zeichen enthalten, die keine Ziffern sind, wird patternMismatch auf true gesetzt. 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, hätten wir möglicherweise validityState.tooLong oder validityState.tooShort auf true gesehen.
Sie können das pattern Attribut verwenden, um einen regulären Ausdruck zu spezifizieren, dem der eingegebene Wert entsprechen muss, um als gültig zu gelten (siehe Validierung gegen einen regulären Ausdruck für einen Crashkurs darüber, wie man reguläre Ausdrücke zur Validierung von Eingaben verwendet).
Das folgende Beispiel beschränkt den Wert auf 4-8 Zeichen und erfordert, dass dieser 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: #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 wie folgt dargestellt:
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4