ValidityState: typeMismatch-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 Eigenschaft typeMismatch des Interfaces ValidityState gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das Attribut type des Elements festgelegten Einschränkungen entspricht.
Wenn das Attribut type bestimmte Zeichenfolgen erwartet, wie bei den Typen email und url, und der Wert nicht den durch den Typ festgelegten Einschränkungen entspricht, ist die Eigenschaft typeMismatch auf true gesetzt.
Der Eingabetyp email erwartet eine oder mehrere gültige E-Mail-Adressen, abhängig davon, ob das Attribut multiple vorhanden ist. Eine gültige E-Mail-Adresse umfasst einen E-Mail-Präfix und eine Domain, mit oder ohne Top-Level-Domain. Wenn der Wert der E-Mail-Eingabe keine leere Zeichenfolge, keine einzelne gültige E-Mail-Adresse oder – falls das Attribut multiple vorhanden ist – keine oder mehrere durch Kommas getrennte E-Mail-Adressen ist, liegt ein typeMismatch vor.
Der Eingabetyp url erwartet eine oder mehrere gültige URLs, abhängig davon, ob das Attribut multiple vorhanden ist. Eine gültige URL enthält ein Protokoll, optional mit einer IP-Adresse, oder eine optionale Kombination aus Subdomain, Domain und Top-Level-Domain. Wenn der Wert der URL-Eingabe keine leere Zeichenfolge, keine einzelne gültige URL oder – falls das Attribut multiple vorhanden ist – keine oder mehrere durch Kommas getrennte URLs ist, liegt ein typeMismatch vor.
Wert
Ein boolescher Wert, der true ist, wenn der ValidityState den Einschränkungen nicht entspricht.
Beispiele
Typabweichung bei einem input-Element
Ein typeMismatch tritt auf, wenn eine Diskrepanz zwischen dem über das Attribut type erwarteten value und den tatsächlich vorhandenen Daten besteht.
Der typeMismatch ist nur einer von vielen möglichen Fehlern und nur für die Typen email und url relevant.
Wenn der bereitgestellte Wert bei anderen Eingabetypen nicht dem auf dem Typ basierenden erwarteten Wert entspricht, treten andere Fehler auf.
Wenn beispielsweise der Wert einer number-Eingabe keine Gleitkommazahl ist, ist badInput auf true gesetzt.
Wenn die E-Mail-Adresse required ist, aber leer ist, wird valueMissing auf true gesetzt.
<pre id="log">Validation logged here...</pre>
<p>
<label>
Enter an email address:
<input id="emailInput" type="email" value="example.com" required />
</label>
</p>
input:invalid {
border: red solid 3px;
}
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
| Spezifikation |
|---|
| HTML # dom-validitystate-typemismatch |
Browser-Kompatibilität
Siehe auch
- Eigenschaften von ValidityState: badInput, valid, customError.
- Einschränkungsvalidierung
- Formulare: Datenvalidierung von Formularen
- Reguläre Ausdrücke