Die schreibgeschütztetypeMismatch-Eigenschaft derValidityState-Schnittstelle zeigt an, ob der Wert eines vom Benutzer bearbeiteten<input>-Elements nicht den durch dastype-Attribut festgelegten Einschränkungen entspricht.

Wenn dastype-Attribut bestimmte Zeichenfolgen erwartet, wie bei den Typenemail undurl, und der Wert nicht den für den Typ festgelegten Einschränkungen entspricht, ist dietypeMismatch-Eigenschaft wahr.

Deremail-Eingabetyp erwartet eine oder mehrere gültige E-Mail-Adressen, je nachdem, ob dasmultiple-Attribut vorhanden ist. Eine gültige E-Mail-Adresse enthält ein E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Ist der Wert des E-Mail-Eingabefelds kein leerer String, eine einzelne gültige E-Mail-Adresse oder eine oder mehrere durch Kommas getrennte E-Mail-Adressen, falls dasmultiple-Attribut vorhanden ist, liegt eintypeMismatch vor.

Derurl-Eingabetyp erwartet eine oder mehrere gültige URLs, je nachdem, ob dasmultiple-Attribut vorhanden ist. Eine gültige URL umfasst ein Protokoll, optional mit einer IP-Adresse oder einer optionalen Subdomain, Domain und einer Top-Level-Domain-Kombination. Ist der Wert des URL-Eingabefelds kein leerer String, eine einzelne gültige URL oder eine oder mehrere durch Kommas getrennte URLs, falls dasmultiple-Attribut vorhanden ist, liegt eintypeMismatch vor.

Wert

Ein Boolean, dertrue ist, wenn derValidityState nicht den Einschränkungen entspricht.

Beispiele

Typfehler bei Eingabeelement

DertypeMismatch tritt auf, wenn eine Diskrepanz zwischen dem über dastype-Attribut erwartetenvalue und den tatsächlich vorhandenen Daten vorhanden ist.DertypeMismatch ist nur einer der vielen möglichen Fehler und ist nur relevant für die Typenemail undurl.Wenn der bereitgestellte Wert nicht dem erwarteten Wert basierend auf dem Typ für andere Eingabetypen entspricht, treten andere Fehler auf.Zum Beispiel, wenn der Wert einesnumber-Eingabefelds keine Gleitkommazahl ist, ist derbadInputtrue.Wenn die E-Mail-Adresserequired ist, aber leer bleibt, wirdvalueMissingtrue sein.

<pre>Validation logged here...</pre><p>  <label>    Enter an email address:    <input type="email" value="example.com" required />  </label></p>

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

body {  margin: 0.5rem;}pre {  padding: 1rem;  height: 2rem;  background-color: lightgrey;  outline: 1px solid grey;}

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

Browser-Kompatibilität

Siehe auch

• ValidityStatebadInput,valid,customError-Eigenschaften.
• Einschränkungsvalidierung
• Formulare: Datenformularvalidierung
• Reguläre Ausdrücke