原生 required 属性无法统一提示样式和行为——chrome、firefox、safari 实现差异大且不可定制，必须弃用 required，改用 setcustomvalidity 配合 checkvalidity 和 reportvalidity 才能实现跨浏览器一致的校验提示。
原生 required 属性的提示无法统一——浏览器完全自主控制文案、位置、延迟和动画，你改不了。
为什么 required 提示在 Chrome/Firefox/Safari 里长得不一样
Chrome 在输入框右下角弹气泡，文案是“请填写此字段”；Firefox 在左上角出 tooltip，文案是“该字段是必填的”；iOS Safari 经常不弹，或点「完成」后无响应。这不是 bug，是规范允许的差异化实现。
所有这些细节都绕过 CSS 和 HTML 控制：你不能用 :invalid 伪类改文案，不能用 position 移动气泡，也不能用 transition 调动画。
-
required不提供任何定制入口，它只做一件事：判空（.value.trim() === ""） - 移动端尤其不可靠：iOS Safari 的软键盘「完成」不会触发
blur，submit也不一定走校验路径 - Firefox 默认给
:invalid加粉红box-shadow，但这是样式副作用，不是提示本身
required 失效的常见场景和修复动作
即使写了 required，也经常不弹提示，原因往往不是兼容性，而是使用方式错了。
- 表单用了
e.preventDefault()或手动调form.submit()→ 浏览器跳过所有原生校验 - 按钮写了
onClick={handleSubmit}同时又绑了onSubmit→ 点击瞬间就执行 JS，根本没走到校验环节 -
input[type="hidden"]、input[type="button"]、contenteditable="true"上加required→ 完全无效，浏览器直接忽略 -
select没设空选项（如<option value="">请选择</option>）→ 默认选中第一项，“非空”导致required不触发 - 元素不在
<form></form>内，或通过 AJAX 手动发请求 → 校验机制压根不启动
真正能统一提示的唯一做法：弃用 required，改用 setCustomValidity
想让所有浏览器显示一样的文案、在一样时机弹出、支持空格过滤或格式校验？必须移除 required 属性，完全由 JS 控制。
关键动作只有三步，缺一不可：
- 移除所有
required属性（否则和setCustomValidity()冲突） - 在
blur或input事件中调用input.setCustomValidity("错误文案")；清空时必须显式调input.setCustomValidity("") - 在
form.submit或自定义提交逻辑中，先调form.checkValidity()判断，失败则form.reportValidity()强制唤起提示 - 移动端补一手：监听
change或input，在blur前主动调reportValidity()，避免 iOS 用户点「完成」卡住
别踩的坑：以为加个 polyfill 就能修好提示
html5shiv、normalize.css、Autoprefixer 这些对 required 提示毫无作用——它们解决的是标签识别、默认样式、CSS 前缀问题，不是浏览器校验逻辑。
真正容易被忽略的点是：你写的 required 可能在 DOM 中根本没生效。比如 React/Vue 动态渲染后没重新绑定属性，或服务端模板漏写了引号导致 required=required 解析失败。用 DevTools 检查 Elements 面板，确认 input 元素上真实存在 required 属性，才是第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
