HTMLInputElement: checkValidity() 方法

基线 广泛可用

此功能已经非常成熟，并且可以在许多设备和浏览器版本上运行。它自以下时间起在各个浏览器中可用： 2018 年 12 月.

checkValidity() 方法是 HTMLInputElement 接口的方法，它返回一个布尔值，该值指示元素是否满足应用于它的任何 约束验证 规则。如果为 false，则该方法还会在元素上触发一个 invalid 事件。由于 checkValidity() 没有默认的浏览器行为，因此取消此 invalid 事件无效。

注意：如果 HTML <input> 元素的 validationMessage 不为空，则该元素被认为无效，将匹配 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 或其他无效情况，则无效事件将记录到控制台。若要向用户报告错误，请改用 HTMLInputElement.reportValidity()。

规范

规范
HTML 标准
# dom-cva-checkvalidity-dev

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅