ValidityState: Eigenschaft rangeUnderflow

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 des ValidityState Interfaces gibt an, ob der Wert eines <input>, nachdem er vom Benutzer bearbeitet wurde, nicht den durch das min Attribut gesetzten Einschränkungen entspricht.

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 den durch den min Wert gesetzten Einschränkungen entspricht.

Wert

Ein boolean, der true ist, wenn der ValidityState nicht den Einschränkungen entspricht.

Beispiele

Eingabe mit numerischem Unterlauf

Das folgende Beispiel überprüft die Gültigkeit eines numerischen Eingabeelements. Eine Einschränkung wurde mithilfe des min Attributs hinzugefügt, die einen Mindestwert von 18 für die Eingabe festlegt. Wenn der Benutzer eine Zahl kleiner als 18 eingibt, schlägt die Elementvalidierung fehl, und die Stile, die mit den CSS-Pseudoklassen :invalid und :out-of-range ü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 Standard # dom-validitystate-rangeunderflow

Browser-Kompatibilität

BCD tables only load in the browser