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

概述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_validationWHATWG HTML 规范（表单约束）：https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constraint-validation