浏览器原生required提示气泡无法统一，Chrome/Firefox/Safari实现差异大且不可样式化；需用oninvalid阻止默认行为、setCustomValidity清空状态，并自定义DOM提示；注意IE8–11、移动端Safari及鸿蒙兼容性问题，服务端必须二次校验。
required气泡在Chrome/Firefox/Safari里根本没法统一
浏览器原生的 required 提示气泡是各自实现的，Chrome 弹右下角、Firefox 弹左上、Safari（尤其 iOS）可能延迟甚至不弹——这不是 bug，是 HTML 规范明确允许的差异化行为。你无法用 CSS 修改文案、位置、动画或触发时机，::-webkit-validation-bubble 在 Chrome 29+ 已被大幅阉割，强行覆盖会导致错位或消失。
别拦着浏览器校验，但得关掉它的气泡
想真正控制提示，必须主动拦截默认行为，再用自定义 DOM 元素替代：
-
oninvalid="event.preventDefault(); showCustomTip(this, '请填写此字段')"—— 阻止原生气泡出现 - 紧接着调
el.setCustomValidity("")清空内部 validity 状态，否则后续form.checkValidity()或 submit 仍会触发原生逻辑 - 自定义气泡用
position: absolute+pointer-events: none，内部按钮单独设pointer-events: auto，避免遮挡底层操作
移动端和 IE8–11 的坑比想象中深
微信旧版 WebView、鸿蒙系统、IE11 这些环境连 reportValidity() 都可能返回 true 却不弹提示，甚至 checkValidity() 都不可靠：
- 对 IE8–11，必须双监听：
el.addEventListener ? el.addEventListener('input', fn) : el.attachEvent('onpropertychange', fn) - 移动端 Safari 对
reportValidity()返回值兼容性差，建议改用checkValidity()+ 手动插入提示 DOM - 鸿蒙
PopupOptions默认按钮不可点，得切到CustomPopupOptions+@Builder手写 Button 组件
最易忽略的细节：初始状态和空格判定
页面一加载就所有必填框变红？那是因为只用了 :invalid 伪类，没加 :not(:placeholder-shown) 过滤。还有更隐蔽的问题：
立即学习“前端免费学习笔记（深入）”；
-
" "（空格）被当成已填，""（空字符串）才算空 —— 后端校验必须 trim 再判 -
<select required><option value="">请选择</option></select>没加disabled，用户不动它就永远过不了校验 - 服务端必须二次校验：前端任何
required、pattern、type="email"都不构成可信依据
