在JavaScript中如何检测HTML表单是否通过有效性校验？

核心逻辑 #

直接调用HTML5原生DOM提供的checkValidity()校验API，该API会自动匹配表单字段配置的required、type="email"、pattern等规则执行校验，返回布尔值表示校验结果，逻辑和浏览器原生提交时的校验完全一致，不会出现规则不一致的问题。

完整实现代码 #

$('form').submit(function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  const nativeForm = this;
  
  // 执行原生校验
  if (!nativeForm.checkValidity()) {
    // 触发浏览器原生错误提示气泡，无需自行编写提示样式
    nativeForm.reportValidity();
    return;
  }

  // 校验通过后执行jQuery提交逻辑，示例为AJAX提交
  $.ajax({
    url: nativeForm.action,
    method: nativeForm.method,
    data: $(nativeForm).serialize(),
    success: function (response) {
      // 提交成功处理逻辑
    },
    error: function (error) {
      // 提交失败处理逻辑
    }
  });
});

自定义错误提示拓展 #

如果需要替换浏览器原生的错误提示气泡，自行控制错误展示样式，可以遍历表单元素获取详细错误信息：

if (!nativeForm.checkValidity()) {
  Array.from(nativeForm.elements).forEach(field => {
    if (!field.validity.valid) {
      // field.validationMessage 为原生生成的对应错误描述
      // 此处可插入自定义错误提示渲染逻辑
      console.log(`字段${field.name}校验失败：${field.validationMessage}`);
    }
  });
  return;
}

兼容说明 #

• checkValidity()与reportValidity()方法兼容所有现代浏览器，IE10及以上版本均支持
• 如有自定义校验规则，可提前给对应字段调用setCustomValidity('自定义错误描述')设置错误信息，再执行校验即可生效

内容的提问来源于stack exchange，提问作者Axel Cardinaels