required属性无效的首要原因是表单未通过原生submit事件提交；其次需确保元素在form内且有name属性，select默认项要加disabled，css不能隐藏验证气泡，旧浏览器需js兜底校验。
required 属性没反应？先确认表单提交触发方式
html5 的 required 属性只在原生表单提交（submit 事件）时生效，不是所有“点击就发请求”的场景都触发校验。比如用 button 绑定 onclick 调用 fetch()、或用 prEventDefault() 拦截后手动提交，required 就完全不工作。
- 检查按钮类型：确保是
<button type="submit"></button>或<input type="submit">，而不是type="button" - 检查是否调用了
event.preventDefault()却没手动校验：如果用了 JS 拦截，就得自己调form.checkValidity() - 避免在
form外部放提交按钮——浏览器无法自动关联校验逻辑
input 或 select 的 required 不生效？看元素是否在 form 内且 name 存在
required 依赖两个隐含前提：元素必须被包裹在 <form></form> 中，且必须有 name 属性。没有 name 的字段即使加了 required，浏览器也直接跳过校验。
-
<input required>→ 无效（缺name） -
<input name="email" required>→ 有效 -
<select required><option value="">选一项</option></select>→ 无效（空value的option会被当作“已选”，绕过校验） - 修复
select：把默认选项设为<option value="" disabled selected>请选择</option>，并确保value=""的选项带disabled
chrome/firefox 提示不出现？检查 CSS 是否隐藏了默认提示框
浏览器原生校验失败时会调用 reportValidity() 并显示气泡提示，但这个提示极易被 CSS 干扰。常见干扰点是全局重置了 ::-webkit-validation-bubble 或设置了 pointer-events: none 等样式。
- 临时排查：在开发者工具中禁用所有自定义 CSS，看提示是否恢复
- 避免对
form或body设置overflow: hidden或transform，这些可能让气泡渲染错位或不可见 - 不要用
display: none或visibility: hidden隐藏必填字段——隐藏的字段不会参与校验
需要兼容旧浏览器或增强提示？别只靠 required，补一手 JS 校验
required 是 html5 基础能力，IE10 及以下、部分安卓 webview 完全不支持。即使现代浏览器支持，它的错误文案固定、样式不可控、无法做异步校验（如用户名是否已存在）。
立即学习“前端免费学习笔记（深入）”；
- 兜底方案：监听
submit事件，用form.checkValidity()主动判断，失败时调form.reportValidity() - 增强提示：用
setCustomValidity("用户名已被占用")替换默认文案，配合validity.customError控制状态 - 注意：调过
setCustomValidity("")才能恢复原生校验；留空字符串表示“通过”，非空字符串才触发错误
有些细节看着不起眼，比如 name 缺失、select 默认项没加 disabled、或者一个 transform 让气泡飞出屏幕——这些问题不会报错，但会让 required 彻底静音。