ValidityState: thuộc tính tooShort
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.
Thuộc tính chỉ đọc tooShort của giao diện ValidityState chỉ ra liệu giá trị của <input>, <button>, <select>, <output>, <fieldset> hoặc <textarea>, sau khi đã được người dùng chỉnh sửa, có nhỏ hơn độ dài đơn vị mã tối thiểu được thiết lập bởi thuộc tính minlength của phần tử hay không.
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ó chuỗi giá trị quá ngắn
Ví dụ sau kiểm tra tính hợp lệ của phần tử nhập văn bản.
Một ràng buộc đã được thêm bằng cách sử dụng thuộc tính minlength để đầu vào kỳ vọng chuỗi có tối thiểu 4 ký tự.
Nếu người dùng nhập chuỗi quá ngắn, 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="text" id="userText" minlength="4" />
const userInput = document.getElementById("userText");
const logElement = document.getElementById("log");
function log(text) {
logElement.innerText = text;
}
userInput.addEventListener("input", () => {
userInput.reportValidity();
if (userInput.validity.tooShort) {
log("Not enough characters entered.");
} else {
log("Input is valid…");
}
});
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # dom-validitystate-tooshort-dev |