HTMLInputElement: phương thức checkValidity()
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.
Phương thức checkValidity() của giao diện HTMLInputElement trả về một giá trị boolean cho biết phần tử có đáp ứng các quy tắc kiểm tra ràng buộc áp dụng cho nó hay không. Nếu false, phương thức cũng kích hoạt sự kiện invalid trên phần tử. Vì không có hành vi mặc định của trình duyệt cho checkValidity(), việc hủy sự kiện invalid này không có tác dụng.
Note:
Một phần tử <input> HTML có validationMessage khác null được coi là không hợp lệ, sẽ khớp với lớp giả CSS :invalid, và sẽ khiến checkValidity() trả về false. Sử dụng phương thức HTMLInputElement.setCustomValidity() để đặt HTMLInputElement.validationMessage thành chuỗi rỗng nhằm đặt trạng thái validity thành hợp lệ.
Cú pháp
checkValidity()
Tham số
Không có.
Giá trị trả về
Trả về true nếu giá trị của phần tử không có vấn đề về tính hợp lệ; ngược lại, trả về false.
Ví dụ
HTML
Chúng ta bao gồm một biểu mẫu chứa trường số bắt buộc và hai nút: một nút để kiểm tra biểu mẫu và nút kia để gửi nó.
<form action="#" method="post">
<p>
<label for="age">Tuổi của bạn (21 đến 65) </label>
<input type="number" name="age" required id="age" min="21" max="65" />
</p>
<p>
<button type="submit">Gửi</button>
<button type="button" id="check">checkValidity()</button>
</p>
<p id="log"></p>
</form>
JavaScript
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
console.log("Sự kiện Invalid đã kích hoạt.");
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.innerHTML = `checkValidity trả về: ${checkVal}`;
});
Kết quả
Khi false, nếu giá trị bị thiếu, dưới 21, trên 65 hoặc không hợp lệ theo cách khác, sự kiện invalid sẽ được ghi vào console. Để báo cáo lỗi cho người dùng, hãy sử dụng HTMLInputElement.reportValidity() thay thế.
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # dom-cva-checkvalidity-dev |