ValidityState: rangeUnderflow-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 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

css

/* or :invalid */
input:out-of-range {
  outline: red solid 3px;
}

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

html

<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

Specification
HTML # dom-validitystate-rangeunderflow