ValidityState: patternMismatch-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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:

das Feld unterstützt das pattern-Attribut — das bedeutet, das <input>-Element ist vom type text, tel, email, url, password oder search
das pattern-Attribut enthält einen gültigen regulären Ausdruck
der Wert des <input> entspricht nicht den durch den pattern-Wert festgelegten Einschränkungen.

In diesem Artikel

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
ValidityState
Instanzeigenschaften
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung

ValidityState: patternMismatch-Eigenschaft

In diesem Artikel

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN