ValidityState: thuộc tính rangeUnderflow
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính chỉ đọc rangeUnderflow của giao diện ValidityState chỉ ra liệu giá trị của <input>, sau khi đã được người dùng chỉnh sửa, có tuân theo các ràng buộc được đặt bởi thuộc tính min của phần tử hay không.
Nếu trường có tính chất số, bao gồm các kiểu date, month, week, time, datetime-local, number và range và giá trị min được đặt, nếu giá trị không tuân theo các ràng buộc được đặt bởi giá trị min, thuộc tính rangeUnderflow sẽ là true.
Giá trị
Một giá trị boolean là true nếu ValidityState không tuân theo các ràng buộc.
Ví dụ
Đầu vào có thiếu hụt số
Ví dụ sau kiểm tra tính hợp lệ của phần tử nhập số.
Một ràng buộc đã được thêm bằng cách sử dụng thuộc tính min đặt giá trị tối thiểu là 18 cho đầu vào.
Nếu người dùng nhập số nhỏ hơn 18, phần tử thất bại xác thực ràng buộc, và các kiểu khớp với :invalid và :out-of-range CSS pseudo-classes
/* hoặc :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…");
}
});
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-validitystate-rangeunderflow |