单选按钮组required失效的真正原因是浏览器校验未启动，需同时满足四个条件：form完整包裹、submit按钮、同name下所有radio、且组内无任何checked属性（包括隐藏的）。
required 属性失效的真正原因
单选按钮组加了 required 却能空提交，不是属性写错了，而是浏览器根本没启动校验。它只在满足全部四个条件时才工作：form 标签完整包裹、按钮是 type="submit"、所有同名 input[type="radio"] 都在同一个 name 下、且组内没有任何一个 radio 带 checked 属性（包括隐藏的）。
最容易被忽略的是最后一点：哪怕你写了个 <input type="radio" name="q1" value="" style="display:none;" checked>，浏览器就认为“已选中”，直接跳过验证。
- 检查 DOM 中是否存在任何
checked属性（不管值是什么，只要存在就生效） - 确保没有用
defaultChecked在 JS 里初始化——那是 React 受控逻辑，原生表单不认 - 禁用默认选中项时，必须彻底移除
checked，而不是设成checked="false"
name 属性拼错导致互斥失效
单选按钮“只能选一个”的行为完全依赖 name 值是否严格一致。大小写、空格、引号类型、前后缀差异都会让它们变成独立组——结果就是多个都能被选中，required 也只校验各自那一个，形同虚设。
比如 name="topic" 和 name="Topic" 在浏览器眼里是两组；name='topic' 和 name="topic" 没问题，但 name=" topic "（带空格）就断开了分组。
- 用
document.querySelectorAll('input[type="radio"]')打印所有 radio，手动比对name值是否完全相同 - 服务端接收时也按这个
name解析，前后端不一致会导致值丢失 - 避免用动态生成的 name，如
name="q_${index}"，除非你确定每组都唯一且静态
如何触发原生错误提示气泡
原生 required 提示只在点击 type="submit" 按钮时出现。如果用了 button onclick="submitForm()" 或 JS 调 form.submit()，气泡永远不会弹出来。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
想让用户失焦就看到提示，得主动调 reportValidity()；想在 JS 提交前做校验，必须用 form.requestSubmit()，而不是 form.submit()。
-
form.requestSubmit()会触发校验链、显示气泡、阻止提交（失败时），但 IE 和旧安卓 WebView 不支持 - 兼容写法：先
if (form.checkValidity()) { /* 提交 */ } else { form.reportValidity(); } - 对单个 radio 组校验无效——
reportValidity()只作用于整个form，不能传参数限定范围
label 绑定错误导致点击无效
用户点文字没反应，不是样式问题，是 label 没和 input 关联。这会导致触控困难、无障碍失效，还可能让某些校验逻辑误判“未交互”状态。
最稳写法是把 input 直接包进 label 里：<label><input type="radio" name="mode" value="auto"> 自动</label>。用 for + id 也可以，但要求 id 全局唯一且拼写零误差。
- 禁止多个 radio 共用同一个
id，否则for绑定会随机命中一个 - 不要用 JS 动态修改
id后忘记同步更新对应label[for] - 移动端尤其要注意：纯
input的点击热区太小，没绑定 label 就等于放弃触控体验
真正卡住校验的，往往不是逻辑没写对，而是某个隐藏 radio 带着 checked 静静躺在 DOM 里，或者 name 多了个空格——这些细节不会报错，只会让 required 形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
