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 |
浏览器兼容性
加载中…