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 gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das pattern-Attribut des Elements festgelegten Anforderungen entspricht.

Die patternMismatch-Eigenschaft ist genau dann wahr, wenn alle folgenden Bedingungen erfüllt sind:

Wert

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

Beispiele

Gegeben 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 3 Abschnitte für eine nordamerikanische Telefonnummer mit einer impliziten Beschriftung, die alle drei Komponenten der Telefonnummer umfasst und erwartet jeweils 3 Ziffern, 3 Ziffern und 4 Ziffern, wie durch das pattern-Attribut auf jedem Abschnitt 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.

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

Beachten Sie, dass in diesem Fall ein patternMismatch und nicht validityState.tooLong oder validityState.tooShort ausgelöst wird, wenn die Werte zu lang oder zu kurz sind, da es das Muster ist, das die Länge des Werts bestimmt. Hätten wir stattdessen die minlength- und maxlength-Attribute verwendet, hätten wir möglicherweise gesehen, dass validityState.tooLong oder validityState.tooShort auf true gesetzt werden.

Hinweis: Der email Eingabetyp erfordert mindestens ein Muster von x@y, und der url Eingabetyp erfordert mindestens ein Muster von x:, ohne dass ein Muster-Attribut vorhanden ist. Wenn ungültig, wird validityState.typeMismatch auf true gesetzt, 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