ValidityState: thuộc tính stepMismatch
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 stepMismatch 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 step 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ị step không phải là any, nếu giá trị không tuân theo các ràng buộc được đặt bởi các giá trị step và min, thì stepMismatch sẽ là true. Nếu phần dư của giá trị đi��u khiển biểu mẫu trừ đi giá trị min, chia cho giá trị step (mặc định là 1 nếu bị bỏ qua) không bằng không, thì có sự không khớp.
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ó không khớp step
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 step có nghĩa là đầu vào kỳ vọng các giá trị tăng theo bước 5.
Nếu người dùng nhập số không chia hết cho 5, phần tử thất bại xác thực ràng buộc, và các kiểu khớp với lớp giả CSS :invalid đ��ợc áp dụng.
input:invalid {
outline: red solid 3px;
}
<pre id="log">Validation logged here...</pre>
<input type="number" id="degrees" step="5" />
const userInput = document.getElementById("degrees");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.stepMismatch) {
log("Input must be divisible by 5");
} else {
log("Input is valid…");
}
});
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-validitystate-stepmismatch |