HTML Constraint Validation API：原生表单校验与提示策略

---

title: HTML Constraint Validation API：原生表单校验与提示策略

keywords:

• Constraint Validation
• validity
• setCustomValidity
• reportValidity
• required/pattern

description: 介绍原生表单的约束校验 API 与属性，用 validity/validationMessage 读取状态，setCustomValidity/reportValidity

设置与展示提示，结合可访问性与国际化策略。

categories:

• 文章资讯
• 技术教程

---

概述

HTML 提供内建约束校验（required/min/max/pattern/type 等），并通过 Constraint Validation API 暴露状态与方法。可在不依赖第三方库的情况下实现一致的校验与提示。

示例

<form id="f">
  <input id="email" type="email" required>
  <button>提交</button>
</form>
<script>
const el = document.getElementById('email')
el.addEventListener('input', () => {
  if (!el.validity.valid) {
    el.setCustomValidity('请输入有效邮箱')
  } else {
    el.setCustomValidity('')
  }
})
document.getElementById('f').addEventListener('submit', e => {
  if (!el.reportValidity()) e.preventDefault()
})
</script>

工程建议

• 文本与国际化：使用本地化提示文案；避免仅用颜色表示错误（无障碍）。
• 交互：在失焦或提交时提示；高优先级错误优先展示。
• 安全：前端校验只是体验；后端需重复校验并防注入。

参考与验证

• MDN Constraint Validation 文档：https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation
• WHATWG HTML 规范（表单约束）：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constraint-validation