应禁用原生校验气泡，改用 novalidate + setcustomvalidity() + reportvalidity() 控制校验逻辑，并通过 js 增删 is-invalid 类配合 css 实现可控的视觉反馈，同时利用 validitystate 细分属性提供精准错误提示。
如何覆盖 input 和 select 的默认校验气泡（Constraint Validation API 提示）
浏览器原生校验提示（比如红色边框 + 弹出“请填写此字段”）无法用 CSS 直接修改气泡内容或样式——这是浏览器 UI 层的限制，::-webkit-validation-bubble 等伪元素早已被弃用且无跨浏览器支持。真正可控的是「触发时机」和「视觉反馈替代方案」。
- 不要尝试用
tooltip或title覆盖原生提示：它会和原生气泡叠加，体验更差 - 禁用原生校验最稳妥的方式是加
novalidate到form标签，然后手动调用checkValidity()和setCustomValidity() - 若只希望隐藏气泡但保留红边框，可对
:invalid:not(:placeholder-shown)做样式重置，但注意 Safari 对:invalid的触发时机更保守
setCustomValidity() 怎么用才不破坏提交逻辑
这个方法不是“显示提示”，而是设置校验状态：空字符串表示通过，非空字符串表示失败并阻止表单提交。关键在于调用后必须配合 reportValidity() 才能触发 UI 反馈（如红边框），否则用户看不到任何变化。
- 在
input的blur或change事件里调用：input.setCustomValidity(input.value.trim() ? '' : '此项必填') - 不要在
submit事件里才首次调用——此时用户已点击提交，体验割裂；应在用户离开字段时就反馈 - 每次校验前先调用
input.setCustomValidity('')清空旧状态，否则后续checkValidity()会持续返回 false
用 CSS 控制红边框和错误文案位置（不依赖气泡）
原生气泡不可控，但你可以用 CSS 模拟自己的错误提示区域，并通过 JS 同步显示/隐藏。核心是监听 invalid 和 valid 事件，而非仅靠伪类。
- 给
input添加class="form-input"，用.form-input:invalid { border-color: #e53e3e; }改边框色 - 为每个输入框配一个
<span class="error-message"></span>，JS 中根据input.validationMessage或自定义文案填充它 - 避免用
:invalid控制display: none/block：Firefox 下该伪类在初始渲染时不触发，导致错误文案始终不显示 - 推荐做法：JS 主动增删
is-invalid类，CSS 写.form-input.is-invalid { border-color: #e53e3e; }和.error-message.is-shown { display: block; }
为什么 ValidityState 对象里的 valueMissing、typeMismatch 很重要
直接读 input.validity.valid 只知道“是否通过”，但不知道“为什么失败”。细分属性才能做精准提示，比如邮箱格式错显示“邮箱格式不正确”，而非笼统的“请填写”。
-
input.validity.valueMissing→ 必填未填 -
input.validity.typeMismatch→ 如type="email"但输入了 “abc” -
input.validity.tooShort→minlength不满足 - 注意：这些属性只在调用
checkValidity()或触发原生校验后才更新，不是实时响应式
reportValidity() 就不会触发 :invalid 伪类，也不触发 invalid 事件——很多样式失效，其实只是这一步漏了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
