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>-Elements, nachdem es vom Benutzer bearbeitet wurde, nicht den durch das pattern-Attribut festgelegten Beschrä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 den Beschränkungen nicht entspricht.

Beispiele

Gegeben seien die folgenden:

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 3 Abschnitte für eine nordamerikanische Telefonnummer mit einem impliziten Label, das alle drei Komponenten der Telefonnummer umfasst, und erwarten jeweils 3 Ziffern, 3 Ziffern und 4 Ziffern, 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. Wenn true, entspricht das Element den :invalid CSS-Pseudoklassen.

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

Beachten Sie in diesem Fall, dass wir ein patternMismatch erhalten und nicht validityState.tooLong oder validityState.tooShort, wenn die Werte zu lang oder zu kurz sind, da das Muster die Länge des Wertes bestimmt. Hätten wir stattdessen die minlength- und maxlength-Attribute verwendet, hätten wir vielleicht validityState.tooLong oder validityState.tooShort als true erlebt.

Hinweis: Der email-Eingabetyp erfordert mindestens ein Muster von x@y und der url-Typ erfordert mindestens ein Muster von x:, ohne dass ein Muster-Attribut vorhanden ist. Wenn sie ungültig sind, wird validityState.typeMismatch true sein, wenn kein Muster-Attribut vorhanden ist (oder wenn das Muster-Attribut für diesen Eingabetyp nicht gültig ist).

Spezifikationen

Specification
HTML Standard
# dom-validitystate-patternmismatch

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch