HTMLInputElement: checkValidity() 方法
checkValidity() 方法是 HTMLInputElement 介面的一部分，它返回一個布林值，指示該元素是否滿足應用於它的任何 約束驗證 規則。如果返回 false，該方法還會在此元素上觸發一個 invalid 事件。由於 checkValidity() 沒有預設的瀏覽器行為，取消這個 invalid 事件不會有任何效果。
注意： 一個具有非空 validationMessage 的 HTML <input> 元素被認為是無效的，它會匹配 CSS :invalid 偽類，並導致 checkValidity() 返回 false。使用 HTMLInputElement.setCustomValidity() 方法將 HTMLInputElement.validationMessage 設定為空字串，以將 validity 狀態設定為有效。
語法
js
checkValidity()
引數
無。
返回值
如果元素的價值沒有有效性問題，則返回 true；否則返回 false。
示例
HTML
我們包含一個包含必填數字欄位和兩個按鈕的表單：一個用於檢查表單，另一個用於提交表單。
html
<form action="#" method="post">
<p>
<label for="age">Your (21 to 65) </label>
<input type="number" name="age" required id="age" min="21" max="65" />
</p>
<p>
<button type="submit">Submit</button>
<button type="button" id="check">checkValidity()</button>
</p>
<p id="log"></p>
</form>
JavaScript
js
const output = document.querySelector("#log");
const checkButton = document.querySelector("#check");
const ageInput = document.querySelector("#age");
ageInput.addEventListener("invalid", () => {
console.log("Invalid event fired.");
});
checkButton.addEventListener("click", () => {
const checkVal = ageInput.checkValidity();
output.innerHTML = `checkValidity returned: ${checkVal}`;
});
結果
當返回 false 時，如果值缺失、低於 21、高於 65 或無效，則會在控制檯中記錄 invalid 事件。要向用戶報告錯誤，請改用 HTMLInputElement.reportValidity()。
規範
| 規範 |
|---|
| HTML # dom-cva-checkvalidity-dev |
瀏覽器相容性
載入中…