setCustomValidity() 可完全覆盖HTML5原生验证提示文案，传非空字符串即无效、空字符串才通过；需配合invalid事件阻止默认提示、checkValidity()触发校验及:valid/:invalid伪类实现同步视觉反馈。
用 setCustomValidity() 覆盖浏览器默认提示
HTML5 表单原生验证（比如 required、type="email"）触发时，浏览器会弹出英文或系统语言的提示框，无法直接修改文案。真正可控的方式是调用元素的 setCustomValidity() 方法——它会覆盖所有内置校验结果，把验证逻辑完全交给你。
注意：只要传入非空字符串（哪怕是一个空格），该字段就视为“无效”；传入空字符串 '' 才代表“通过”。别写成 null 或 undefined，那不会清空错误状态。
常见误操作：
- 在
input事件里反复调用setCustomValidity('')，导致用户还没输完就被清掉错误提示 - 没配合
reportValidity()主动触发校验，只靠提交时自动判断，提示时机不可控 - 忘记在通过校验后手动清除之前设的错误信息，导致后续输入一直卡在“无效”状态
绑定 invalid 事件来定制提示展示方式
浏览器在判定表单控件无效时会同步触发 invalid 事件（注意不是 blur 或 submit），这是插入自定义提示的最佳钩子。它只在验证失败时触发，且早于默认弹窗，可以在这里阻止默认行为并显示自己的提示。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 必须用
event.preventDefault()阻止浏览器原生气泡提示 - 建议配合
element.checkValidity()再确认一次，避免因其他脚本干扰导致状态不一致 - 提示 DOM 最好插在元素附近（如
insertAdjacentElement('afterend', tip)），别用alert()，体验差且移动端常被拦截
示例片段：
emailInput.addEventListener('invalid', e => {
e.preventDefault();
showCustomTip(emailInput, '邮箱格式不对，请检查 @ 和域名');
});
配合 :valid / :invalid 伪类做视觉反馈
光有提示文字不够，用户需要实时视觉线索。CSS 的 :valid 和 :invalid 伪类能响应 checkValidity() 结果，但有个关键前提：元素必须参与约束验证（constraining validation），即至少带一个验证属性（如 required、minlength、pattern）。
容易忽略的细节：
-
setCustomValidity('')后，元素立刻变成:valid；设为非空后立刻变成:invalid，无需手动刷新 -
:invalid在用户未交互前也会匹配（比如页面加载后空的required输入框），可用:user-invalid（Chrome/Firefox 支持）限定为“用户操作后才生效” - 不要只依赖边框变红，加个图标或背景色变化，对色觉障碍用户更友好
提交前用 checkValidity() 统一触发并收集错误
如果表单有多个字段，想在提交按钮点击时集中校验、统一滚动到首个错误项并高亮，就得主动调用 form.checkValidity()。它会返回 false 并触发所有子元素的 invalid 事件，但不会自动提交。
实用技巧：
- 遍历
form.querySelectorAll(':invalid')拿到所有当前无效的元素，比监听每个invalid更适合汇总处理 - 对第一个无效元素调用
element.scrollIntoView({ behavior: 'smooth', block: 'center' })，比手动计算 offset 更可靠 - 别在
submit事件里只做return false就完事——要真调用checkValidity()，否则部分浏览器可能跳过验证直接提交
复杂点在于：自定义提示文案和视觉反馈要和原生验证状态严格同步，稍有不同步就会出现“提示消失了但边框还是红的”这类矛盾状态。最稳妥的做法是所有状态变更都围绕 setCustomValidity() 这一根轴来驱动。
