ValidityState: rangeUnderflow-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 rangeUnderflow-Eigenschaft der ValidityState-Schnittstelle gibt an, ob der Wert eines vom Benutzer bearbeiteten <input>-Elements nicht mit den durch das min-Attribut festgelegten Einschränkungen übereinstimmt.
Wenn das Feld numerischer Natur ist, einschließlich der Typen date, month, week, time, datetime-local, number und range, und ein min-Wert festgelegt ist, wird die rangeUnderflow-Eigenschaft auf true gesetzt, wenn der Wert nicht mit den durch den min-Wert festgelegten Einschränkungen übereinstimmt.
Wert
Ein boolescher Wert, der true ist, wenn der ValidityState nicht mit den Einschränkungen übereinstimmt.
Beispiele
Eingabe mit numerischem Unterlauf
Das folgende Beispiel prüft die Gültigkeit eines numerischen Eingabeelements.
Eine Einschränkung wurde mit dem min-Attribut hinzugefügt, das einen Mindestwert von 18 für die Eingabe festlegt.
Wenn der Benutzer eine Zahl kleiner als 18 eingibt, schlägt die Einschränkungsvalidierung des Elements fehl, und die Stile, die mit den :invalid und :out-of-range CSS-Pseudoklassen übereinstimmen
/* or :invalid */
input:out-of-range {
outline: red solid 3px;
}
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" />
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.rangeUnderflow) {
log("Number is too low!");
} else {
log("Valid…");
}
});
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-validitystate-rangeunderflow |