ValidityState: typeMismatch 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 typeMismatch-Eigenschaft der ValidityState-Schnittstelle zeigt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das type-Attribut des Elements festgelegten Einschränkungen entspricht.

Wenn das type-Attribut spezifische Zeichenfolgen erwartet, wie die Typen email und url, und der Wert nicht den durch den Typ festgelegten Einschränkungen entspricht, wird die typeMismatch-Eigenschaft auf true gesetzt.

Der email Eingabetyp erwartet eine oder mehrere gültige E-Mail-Adressen, abhängig davon, ob das multiple-Attribut vorhanden ist. Eine gültige E-Mail-Adresse umfasst ein E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Wenn der Wert des E-Mail-Eingabefelds nicht eine leere Zeichenfolge, eine einzelne gültige E-Mail-Adresse oder eine oder mehrere kommagetrennte E-Mail-Adressen ist, sofern das multiple-Attribut vorhanden ist, liegt ein typeMismatch vor.

Der url Eingabetyp erwartet eine oder mehrere gültige URLs, abhängig davon, ob das multiple-Attribut vorhanden ist. Eine gültige URL umfasst ein Protokoll, optional mit einer IP-Adresse oder einer optionalen Kombination aus Subdomain, Domain und Top-Level-Domain. Wenn der Wert des URL-Eingabefelds nicht eine leere Zeichenfolge, eine einzelne gültige URL oder eine oder mehrere kommagetrennte URLs ist, sofern das multiple-Attribut vorhanden ist, liegt ein typeMismatch vor.

Eingabetyp Wert Erwarteter Wert
email x@y oder x@y.z E-Mail-Adresse, mit oder ohne TLD
url x: oder x://y.z Protokoll oder vollständige URL mit Protokoll

Wert

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

Beispiele

Typmismatch bei Eingabeelement

Der typeMismatch tritt auf, wenn eine Diskrepanz zwischen dem über das type-Attribut erwarteten value und den tatsächlich vorhandenen Daten besteht. Der typeMismatch ist nur einer von vielen möglichen Fehlern und ist nur relevant für die Typen email und url. Wenn der bereitgestellte Wert nicht dem erwarteten Wert basierend auf dem Typ für andere Eingabetypen entspricht, treten verschiedene Fehler auf. Zum Beispiel, wenn der Wert des number Eingabefelds keine Gleitkommazahl ist, ist badInput true. Wenn die E-Mail required ist, aber leer bleibt, wird valueMissing true sein.

html
<pre id="log">Validation logged here...</pre>
<p>
  <label>
    Enter an email address:
    <input id="emailInput" type="email" value="example.com" required />
  </label>
</p>
css
input:invalid {
  border: red solid 3px;
}
js
const emailInput = document.getElementById("emailInput");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

emailInput.addEventListener("input", () => {
  emailInput.reportValidity();
  if (emailInput.validity.valid) {
    log("Input OK…");
  } else if (emailInput.validity.typeMismatch) {
    log("Input is not an email.");
  } else {
    log("Validation failed: " + emailInput.validationMessage);
  }
});

Spezifikationen

Specification
HTML Standard
# dom-validitystate-typemismatch

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch