ValidityState: patternMismatch-Eigenschaft

Baseline Weitgehend verfgbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Die schreibgeschtzte 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 Einschrnkungen entspricht.

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

das Feld untersttzt das pattern-Attribut das bedeutet, das <input>-Element ist vom type text, tel, email, url, password oder search
das pattern-Attribut enthlt einen gltigen regulren Ausdruck
der Wert des <input> entspricht nicht den durch den pattern-Wert festgelegten Einschrnkungen.

Wert

Ein boolescher Wert, der true ist, wenn das ValidityState-Objekt nicht den Einschrnkungen 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 fr 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 Lnge des Wertes bestimmt. Htten wir stattdessen die minlength- und maxlength-Attribute verwendet, knnten 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 ungltig, wird der validityState.typeMismatch wahr sein, wenn kein Musterattribut vorhanden ist (oder wenn das Musterattribut fr diesen Eingabetyp nicht gltig ist).

Spezifikationen

Spezifikation
HTML # dom-validitystate-patternmismatch

Browser-Kompatibilitt

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden