ValidityState: patternMismatch-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

Die schreibgeschützte patternMismatch-Eigenschaft des ValidityState-Interfaces zeigt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das pattern-Attribut des Elements festgelegten Einschränkungen entspricht.

Die patternMismatch-Eigenschaft ist genau dann true, wenn alle folgenden Bedingungen zutreffen:

Wert

Ein boolescher Wert, der true ist, wenn das ValidityState-Objekt nicht den Einschränkungen entspricht.

Beispiele

Gegeben sei folgendes:

html
<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.

css
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).

Spezifikationen

Specification
HTML
# dom-validitystate-patternmismatch

Browser-Kompatibilität

Siehe auch