最可控、跨浏览器兼容的表单验证美化方案是监听invalid事件并阻止默认行为，将validationMessage写入自定义DOM元素；需配合:invalid:user-invalid伪类和JS状态管理实现“输错才标红”，提交时集中展示全部错误。
直接用 invalid 事件拦截原生气泡，再把 validationMessage 写进自定义 DOM 元素，是最可控、跨浏览器兼容的美化方案。关键不是“替换气泡”，而是“接管提示时机和位置”。
监听 invalid 事件并阻止默认行为
该事件在浏览器判定字段无效时立即触发，且发生在原生气泡弹出前——这是唯一能可靠拦截的时机。
- 必须在事件处理器中调用
e.preventDefault()，否则原生气泡和你的 DOM 提示会同时出现 - 事件不冒泡，也不能取消已弹出的提示（所以没监听到就无法补救）
- 只对用户操作过又失败的字段生效，避免页面加载就满屏红框
把错误文案写进相邻 DOM 元素
不要依赖气泡定位，改用静态或相对布局的提示容器，比如紧贴输入框下方的 <div class="error"></div>。
- 在
invalid回调里，找到对应字段旁的错误容器，设置textContent = el.validationMessage - 配合
el.classList.add('error')触发样式变化（如边框变红、背景高亮） - 若字段未设
setCustomValidity()，validationMessage就是浏览器默认文案；设过则取你写的那句
配合 :invalid:user-invalid 控制视觉反馈
仅靠 JS 添加 class 容易遗漏状态同步，CSS 伪类能自动响应验证结果，但需注意组合逻辑：
立即学习“前端免费学习笔记（深入）”；
-
:invalid单独使用会在页面加载时就标红所有未填必填项——这不是用户期望的体验 -
:user-invalid是用户与字段交互后才生效的状态，和:invalid组合使用（:invalid:user-invalid）才能做到“输错才标红” - 对
<select></select>等不自动触发:user-invalid的控件，仍需 JS 手动加 class 并配 CSS
提交时统一收集并展示全部错误
用户点击提交，你不希望一个个弹气泡，而是集中呈现所有问题。
- 在
submit事件中e.preventDefault()，彻底禁用原生流程 - 遍历
form.elements，对每个!el.checkValidity()的元素，读取其validationMessage - 把错误文案插入顶部全局提示区，或分别写入各字段旁的
.error容器 - 校验失败后，建议
el.focus()到第一个出错字段，帮助用户快速定位
