只需在一个同组radio上加required即可实现组内必选，因浏览器按name字符串字面量整体校验；name不一致、隐藏checked项或缺失服务端校验均会导致失效。
只在同组任意一个 上加 required 属性，就能强制用户必须选一项——这是唯一靠 HTML 原生机制实现“组内必选”的方式。
为什么只加在一个 radio 上就生效？
浏览器对 name 相同的 radio 元素做整体校验：只要该组中存在至少一个带 required 的控件，整组就被视为必填。用户未选任何项时，点击 submit 会阻断提交，并触发原生提示（如“请填写此字段”）。
- 加多个
required没额外效果，纯属冗余 - 不加
required，哪怕所有 radio 都有checked，用户仍可手动取消全部选择，提交后该name键直接从请求体中消失 -
required必须写在 HTML 标签里，不能靠 JS 模拟或 CSS 隐藏来替代
name 不一致是导致 required 失效的最常见原因
浏览器严格按 name 字符串字面量分组，大小写、空格、拼写差异都会让分组断裂。
- 错误示例：
name="status"和name="Status"被视为两组；name="plan-1 "（尾部空格）和name="plan-1"也不匹配 - 用浏览器 DevTools 逐个检查每个
的实际name值，别信变量名或注释 - 框架中动态生成 name 时务必
trim()空格，推荐统一用小写+连字符，如name="user-preference"
隐藏的 checked 项会悄悄绕过 required 校验
如果组里有一个 style="display:none" 且带 checked 的 radio（哪怕 value=""），浏览器会认为该组“已有值”，直接跳过验证。
- 典型场景：心理量表中为每题预设一个“未作答”隐藏选项
- 正确做法：彻底移除所有默认选中的 radio（尤其是隐藏项），让整组初始为空
- 若需“无选项”语义，应显式提供一个可见的兜底项，如
，并确保它不带checked
服务端必须二次校验，不能信任前端 required
required 可被禁用 JS、手动修改 DOM、curl 提交等方式完全绕过。
- 收到请求后，必须明确检查：该
name参数是否存在于请求体（POST）或查询参数（GET）中 - 检查其值是否属于预设白名单（如
"yes"、"no"、"maybe"），而非仅判空 - 拒绝含重复
name的请求（说明前端逻辑已出错），不要依赖“取第一个同名参数”的行为
最容易被忽略的是：checked 不等于必选，required 才是硬约束；而 name 字符串的字面量一致性，比任何 JS 校验都早一步决定分组是否成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
