HTML必填校验规则详解【收藏】

本文深入剖析了HTML表单中required与pattern等原生校验机制的底层行为差异与常见陷阱，指出required仅做空值判断、pattern默认不校验空值、浏览器提交流程会绕过自定义规则等关键问题，并给出以submit事件拦截+checkValidity()+reportValidity()为核心的可靠解决方案，同时提醒novalidate的真实作用、跨浏览器兼容性难点（如validity字段差异、中文输入法延迟）及生产环境易踩的坑，帮助开发者真正掌控表单验证逻辑，避免前端校验失效导致后端裸奔。

HTML 的 required 属性本身不触发自定义校验规则，它只做最基础的“非空”判断；想配合自定义规则（比如邮箱格式、最小长度、正则匹配），必须手动干预验证流程，否则浏览器默认行为会绕过你的逻辑。

为什么 required 和 pattern 一起用时仍可能跳过校验

常见现象：表单提交时，required 生效了，但 pattern 没触发，或者只在焦点离开时提示，提交却直接通过。这是因为浏览器对 pattern 的校验默认仅在用户交互（如输入、失焦）后才激活，且若字段为空，pattern 根本不会执行——required 已经“接管”了空值判定。

• pattern 不校验空值，哪怕写了 pattern=".{1,}"，空字符串也视为“不满足 pattern”，但浏览器不会因此阻止提交，除非同时有 required
• 若你用 JavaScript 手动调用 checkValidity()，它会同时检查 required 和 pattern，但原生 submit 事件不一定等你这一步
• 某些旧版 Safari 对 pattern 支持不一致，正则中的 Unicode 字符（如中文）可能被忽略

用 addEventListener('submit') 拦住原生提交再校验

这是最可控的方式：不让表单走默认流程，自己统一判断，再决定是否提交。适用于需要组合多个规则（比如“必填 + 邮箱格式 + 不能是 test@example.com”）的场景。

• 必须在 event.preventDefault() 后调用 form.checkValidity()，否则浏览器仍可能按默认逻辑走
• 如果要显示自定义错误提示，别只依赖 setCustomValidity()，需配合 reportValidity() 触发 UI 反馈
• 注意重置自定义错误：每次校验前，先对每个字段调用 input.setCustomValidity('')，否则上次的错误会残留

form.addEventListener('submit', e => {
  e.preventDefault();
  const email = document.getElementById('email');
  email.setCustomValidity('');
  if (!email.value) {
    email.setCustomValidity('邮箱不能为空');
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value)) {
    email.setCustomValidity('请输入有效邮箱');
  } else if (email.value === 'test@example.com') {
    email.setCustomValidity('该邮箱不可用');
  }
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }
  // 此处再发 AJAX 或 submit()
});

novalidate 属性不是“关掉校验”，而是“关掉浏览器默认反馈”

加了 novalidate 的表单，required 和 pattern 的约束依然存在，只是提交时不弹红框、不聚焦、不中断流程——checkValidity() 仍返回布尔值，validity 对象也照常工作。它适合完全接管校验逻辑的项目（比如用 React 或 Vue 做表单管理）。

• 误以为加了 novalidate 就不用写校验逻辑，结果后端收到非法数据
• 加了 novalidate 却没配 JS 校验，等于裸奔
• 移动端键盘类型（如 inputmode="email"）不受 novalidate 影响，该弹邮箱键盘还是弹

真正麻烦的不是怎么写规则，而是不同浏览器对 validity 对象字段的解释差异——比如 validity.badInput 在 Chrome 和 Firefox 对 number 输入的处理就不一样；还有，用 input 事件实时校验时，中文输入法未上屏的字符会导致 value 滞后，得监听 compositionend 补齐。

理论要掌握，实操不能落！以上关于《HTML必填校验规则详解【收藏】》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！