ValidityState: thuộc tính rangeOverflow
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 rangeOverflow 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 max 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ị max được đặt, nếu giá trị không tuân theo các ràng buộc được đặt bởi giá trị max, thuộc tính rangeOverflow 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ó tràn 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 max đặt giá trị tối đa là 18 cho đầu vào.
Nếu người dùng nhập số lớn 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" max="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.rangeOverflow) {
log("Number is too high!");
} else {
log("Input is valid…");
}
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # dom-validitystate-rangeoverflow |