必须只在同组任一 radio 上加 required 属性，因浏览器按 name 分组校验，整组必填；name 不一致（大小写、空格等）会导致分组失效，服务端须二次校验参数存在性及合法性。
必须加 required 属性，且只加在同组任意一个 <input type="radio"> 上 —— 这是唯一能靠 HTML 原生机制强制“必选一项”的方式。
为什么只在一个 radio 上加 required 就够了？
浏览器对同一 name 组的 radio 作整体校验：只要该组中至少有一个 required，就表示整组必填。用户未选任何项时，提交会阻断并提示“请检查此字段”。
- 加多个
required没额外效果，纯属冗余 - 不加
required，哪怕所有 radio 都有checked，用户仍可手动取消全部选择，提交后该name键直接消失 -
required必须写在<input>标签里，不能靠 JS 模拟或 CSS 隐藏来替代
常见错误：name 不一致导致 required 失效
如果同组 radio 的 name 值存在大小写、空格或拼写差异（比如 name="status" 和 name="Status"），浏览器视为两组独立控件。此时你在其中一组加了 required，另一组依然可空着提交。
- 用 DevTools 检查每个 radio 的实际
name属性值，别信变量名或注释 - 框架中动态生成 name 时注意 trim 空格：
name={`plan-${id} `}尾部空格会让分组断裂 - 统一用小写+连字符，如
name="user-preference"
服务端必须二次校验 name 是否存在且合法
前端 required 可被绕过（禁用 JS、手动修改 DOM、curl 提交等）。服务端收到请求时，必须明确检查：
-
name参数是否出现在请求体中（HTTP POST）或查询参数中（GET） - 该值是否属于预设白名单（如
"yes"、"no"、"maybe"） - 不能依赖“只取第一个同名参数”的行为，要主动拒绝含重复
name的请求（说明前端已出错）
最容易被忽略的是：checked 不等于必选，required 才是硬约束；而 name 字符串的字面量一致性，比任何 JS 校验都早一步决定分组是否成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
