JavaScript 中怎么使用 checkValidity 方法触发原生表单校验-js教程-PHP中文网

checkvalidity()是html表单元素的原生验证方法，返回布尔值表示校验结果；它不触发ui反馈，需配合reportvalidity()显示默认提示，且依赖校验属性、非disabled/readonly状态及手动调用。

javascript 中怎么使用 checkvalidity 方法触发原生表单校验

checkValidity() 是 HTML 表单元素（如 <input>、<textarea></textarea>、<select></select>）的原生方法，用于触发浏览器内置的表单验证逻辑，并返回一个布尔值表示当前字段是否通过校验。

调用 checkValidity 的基本方式

直接在表单控件 DOM 元素上调用即可：

对单个输入框：获取元素后调用 element.checkValidity()
对整个表单：调用 formElement.checkValidity()，它会检查所有可验证子控件，任一失败即返回 false

配合 reportValidity 显示默认错误提示

checkValidity() 本身不会弹出错误信息或高亮问题字段。如需显示浏览器默认的校验提示（比如红色边框 + tooltip），应使用 reportValidity() —— 它内部先调用 checkValidity()，再自动触发 UI 反馈。

例如：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

const input = document.querySelector('#email');
if (!input.checkValidity()) {
  input.reportValidity(); // 显示原生错误气泡
}

在自定义提交逻辑中手动校验

当禁用默认提交行为（如用 event.preventDefault()）时，可主动调用 checkValidity() 控制流程：

校验通过才执行后续操作（如发请求）
校验失败可聚焦首个无效字段，提升体验

示例：

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  if (this.checkValidity()) {
    // 执行 AJAX 提交等
    console.log('表单有效，可以提交');
  } else {
    // 找到第一个无效字段并聚焦
    const invalidEl = this.querySelector(':invalid');
    invalidEl?.focus();
  }
});