ValidityState: thuộc tính valueMissing
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 valueMissing của giao diện ValidityState chỉ ra liệu điều khiển required, chẳng hạn như <input>, <select>, hoặc <textarea>, có giá trị rỗng hay không.
Nếu thuộc tính required được đặt, và không có <option> nào được chọn hoặc <textarea> hoặc <input> có thể chỉnh sửa của người dùng là trống, thuộc tính valueMissing sẽ là true. Thuộc tính chỉ là true nếu trường là bắt buộc và không có giá trị; nếu trường không bắt buộc, hoặc nếu trường bắt buộc và có giá trị, giá trị là false.
Giá trị
Một giá trị boolean là true nếu ValidityState không được đặt và thuộc tính required được đặt.
Giá trị đầu vào bắt buộc bị thiếu
Ví dụ sau kiểm tra tính hợp lệ của phần tử nhập số.
Các 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, và thuộc tính required không cho phép giá trị rỗng.
Nếu người dùng nhập bất kỳ giá trị nào không phải số lớn hơn 17, 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 được áp dụng.
input:invalid {
outline: red solid 3px;
}
<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />
const userInput = document.getElementById("age");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.valid) {
log("Input OK…");
} else if (userInput.validity.valueMissing) {
log("Required field cannot be empty.");
} else {
log(`Bad input detected: ${userInput.validationMessage}`);
}
});
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-validitystate-valuemissing-dev |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính ValidityState badInput, valid.
- Xác thực ràng buộc
- Biểu mẫu: Xác thực dữ liệu biểu mẫu
- Biểu thức chính quy