checkValidity()可主动触发HTML5表单控件的原生校验并显示错误气泡，返回布尔值；校验单个元素或整个form均支持，需在submit事件中调用并preventDefault以确保覆盖所有提交方式。
用 checkValidity() 快速触发原生校验
HTML5 表单控件自带基础校验能力（如 required、type="email"、min/max），但默认只在提交时触发。想在点击按钮或失焦时提前判定，直接调用 checkValidity() 即可——它返回布尔值，且会自动触发浏览器的错误提示气泡（如果元素无效）。
注意：该方法只检查单个表单控件，不是整个 <form>。若要校验整表单，需遍历所有可校验子元素，或直接对 <form> 调用（现代浏览器支持）。
- 对单个输入框：
document.getElementById('email').checkValidity() - 对整个表单：
document.querySelector('form').checkValidity()（兼容性良好，Chrome 10+、Firefox 4+、Safari 5.1+） - 调用后若返回
false，对应元素会获得:invalid伪类，可配合 CSS 提示样式
拦截默认提交并手动控制流程
表单提交前做判定，本质是阻止默认行为 + 插入自定义逻辑。最稳妥的方式是在 submit 事件监听器中调用 event.preventDefault()，再执行校验和后续动作。
别在按钮 click 事件里做这事——容易漏掉回车提交、辅助技术触发等场景。
立即学习“前端免费学习笔记（深入）”；
- 绑定到
<form>元素的submit事件，而非按钮 - 先调用
form.checkValidity()，为true再发请求或跳转 - 若校验失败，浏览器已显示原生提示，无需额外弹窗；如需统一 UI，可先调用
form.reportValidity()（强制显示提示）
form.addEventListener('submit', function (e) {
if (!this.checkValidity()) {
e.preventDefault();
return;
}
// 此处发起 fetch 或 submit()
});
setCustomValidity() 覆盖原生消息或添加业务规则
原生校验提示语生硬（如 “Please fill out this field”），且无法表达业务逻辑（如 “用户名已被注册”）。用 setCustomValidity() 可覆盖错误信息，且能将任意字符串设为空表示“有效”。
关键点：只要传入非空字符串，该字段即被标记为无效；传入空字符串（''）才重置为有效状态。
- 必须在每次校验前调用，否则旧错误信息会残留
- 适合搭配异步验证（如用户名唯一性）：先设
setCustomValidity('校验中...')，请求返回后再根据结果设''或具体错误 - 不要混用多个
setCustomValidity()调用而不清空——会导致校验状态混乱
input.addEventListener('blur', async function () {
this.setCustomValidity('校验中...');
const res = await fetch('/api/check-username?u=' + this.value);
const data = await res.json();
this.setCustomValidity(data.taken ? '该用户名已被使用' : '');
});
隐藏原生提示气泡又保留校验逻辑？小心 novalidate
有些项目想完全接管 UI，禁用浏览器默认气泡。此时容易误用 novalidate 属性——它不仅隐藏提示，还彻底关闭所有原生校验（required、type 等全部失效）。
真正需要的是“有校验但不显示气泡”，正确做法是：保留原生属性，用 CSS 隐藏气泡，并靠 JS 控制反馈。
- CSS 隐藏气泡（仅限 Chrome）：
input:invalid { box-shadow: none; }，配合::-webkit-validation-bubble-message { display: none; }（已废弃，不推荐依赖） - 更可靠方式：始终用
setCustomValidity('')清空，再通过 JS 添加自定义错误 class 和提示文案 - 切勿全局加
novalidate后又手动实现required逻辑——重复劳动且易出错
reportValidity() 或未重置 setCustomValidity('')，导致用户修改后仍显示旧错误。这类状态残留问题，在多字段联动校验时尤其隐蔽。 
