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 drei Abschnitte für eine nordamerikanische Telefonnummer mit einem impliziten Label, das alle drei Komponenten der Telefonnummer umfasst, mit jeweils 3 Ziffern, 3 Ziffern und 4 Ziffern, wie durch das auf jedem festgelegte pattern Attribut definiert.
Wenn die Werte zu lang oder zu kurz sind oder Zeichen enthalten, die keine Ziffern sind, wird patternMismatch true. Wenn true, entspricht das Element den :invalid CSS-Pseudoklassen.
input:invalid {
border: red solid 3px;
}
Beachten Sie, dass wir in diesem Fall einen patternMismatch erhalten und nicht validityState.tooLong oder validityState.tooShort, wenn die Werte zu lang oder zu kurz sind, da es das Muster ist, das die Länge des Wertes bestimmt. Hätten wir stattdessen die minlength- und maxlength-Attribute verwendet, könnten wir sehen, dass validityState.tooLong oder validityState.tooShort true ist.
Hinweis: Der email-Eingabetyp erfordert mindestens eine Ãbereinstimmung von x@y und der url-Typ erfordert mindestens eine Ãbereinstimmung mit x:, ohne vorhandenes Musterattribut. Wenn ungültig, wird der validityState.typeMismatch wahr sein, wenn kein Musterattribut vorhanden ist (oder wenn das Musterattribut für diesen Eingabetyp nicht gültig ist).
RetroSearch 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