HTML5原生验证够用但仅适用于基础场景；它自动拦截空必填、格式错误的email/url并显示默认气泡，但文案样式不可控、不支持自定义规则，复杂需求须结合JavaScript。
HTML5原生验证够用吗？
够用，但只适用于基础场景。浏览器会自动拦截空必填字段、格式错误的email或url输入，并显示默认提示气泡。但提示文案无法定制，样式不可控，且不支持自定义规则（比如“密码需含数字和字母”）。如果项目只需防止用户手滑漏填，直接加required、type="email"就行；否则必须配合JavaScript。
用checkValidity()和reportValidity()做手动触发
这两个方法是原生验证的核心接口，常被忽略却非常实用：
-
checkValidity()只检查有效性，返回true或false，不显示提示 -
reportValidity()不仅检查，还会触发浏览器默认的错误提示（带气泡） - 适合在表单提交前统一校验，比如绑定到
button onclick而不是form onsubmit，避免页面跳转干扰调试
示例：
<form id="myForm">
<input type="email" required>
<button type="button" onclick="validateForm()">提交</button>
</form>
<script>
function validateForm() {
const form = document.getElementById('myForm');
if (form.checkValidity()) {
console.log('通过');
} else {
form.reportValidity(); // 弹出原生提示
}
}
</script>
监听input和blur实现实时反馈
原生验证默认只在提交时触发，用户体验差。想做到“输错立刻标红”，得手动监听事件：
-
input事件适合实时校验长度、格式（如手机号前三位），但频繁触发要注意性能 -
blur（失焦）更适合语义化校验，比如邮箱格式、两次密码是否一致 - 别直接改
input.style.borderColor，优先用classList.add('error')配合CSS控制样式，避免内联样式污染 - 注意：
setCustomValidity('')必须调用才能清除之前设置的自定义错误，否则checkValidity()始终返回false
自定义验证用setCustomValidity()要小心
这个API容易误用。关键点：
立即学习“前端免费学习笔记（深入）”；
- 空字符串
''表示“验证通过”，非空字符串（如'密码太短'）才表示失败 - 一旦调用过
setCustomValidity('xxx')，后续必须显式调用setCustomValidity('')重置，否则该字段永远验证失败 - 它和原生验证共存，比如一个
required字段，先设了setCustomValidity('')，再输空，required仍会生效 - 错误文案会覆盖浏览器默认提示，但气泡位置、样式依然不可控
复杂逻辑（比如异步校验用户名是否已存在）必须自己实现UI提示，不能依赖setCustomValidity()。
input的生命周期。 
