单选按钮组必须添加统一的name属性才能正常校验和提交；name缺失或不一致会导致required失效、选项不互斥、后端收不到字段。
单选按钮组没加 name 属性，校验直接失效
原生 HTML 的 radio 按钮必须靠 name 属性成组，浏览器才认为它们是互斥选项。如果漏写或写错（比如大小写不一致、前后空格、拼写错误），哪怕 DOM 看起来排在一起，提交时也只会把第一个 checked 的值发出去，其余全被忽略——更糟的是，required 校验压根不会触发，因为浏览器根本没识别出“这是一组”。
常见错误现象：
- 点选一个 radio，另一个没自动取消（说明 name 不一致）
- 表单提交后，后端收不到该字段（
name缺失或为空） - 加了
required却没有任何提示，点提交就静默通过
正确写法示例：
注意：required 只需加在组内任意一个 input 上即可，但必须确保该 input 是组内第一个可交互项（否则 Safari 可能不认）。
用 checkValidity() 手动触发校验，但得先选中一个
checkValidity() 不会帮你“选一个”，它只检查当前已选中的那个是否满足约束。如果整个 radio 组都没人被 checked，那所有 radio 的 validity.valueMissing 都为 true，但调用 form.checkValidity() 仍会返回 false —— 这是正确行为，不是 bug。
实操建议：
- 别依赖
document.querySelector('input[type="radio"]:checked')是否存在来判断是否选了，而应查form.checkValidity()返回值 - 若想在点击按钮前强制校验，先调
form.checkValidity()，失败则调form.reportValidity()，后者会滚动到未选的 radio 并弹提示（Chrome 下） -
reportValidity()对单个 radio 无效，必须作用于或至少是包含它的父级表单元素
Webstudio 中的 RadioButton 组件不支持受控模式
Webstudio 的 RadioButton 组件源码里固定用了 defaultChecked，且丢弃了 children，这意味着它本质是**非受控组件**：状态由浏览器托管，JS 无法用 value 或 checked prop 动态控制选中项。你不能像 React 常规写法那样传 checked={selected === 'pro'}。
这直接影响校验逻辑：
- 不能靠 React state 控制选中态再统一校验；得监听原生
change事件，手动读取event.target.value - 如果用 JS 设置
input.checked = true，会破坏 Webstudio 的内部状态同步，导致 Builder 预览异常 - 要兼容无障碍，必须确保每个
RadioButton都有配套的Label，且for或嵌套关系正确，否则屏幕阅读器读不出选项含义
后端收到空值？先确认前端是否真提交了该字段
radio 组未选中时，浏览器默认**完全不提交该 name 字段**（不是传空字符串，是根本不发）。所以后端看到缺失字段，第一反应不该是“前端没传”，而是“用户根本没选，或前端校验没拦住”。
排查步骤：
- 打开浏览器 DevTools → Network → 提交表单 → 点开请求 → 查看 Payload，确认
plan=pro这类键值是否存在 - 如果 Payload 里压根没有
plan，说明要么没加required，要么用户绕过了（比如禁用 JS 后手动删掉required属性） - 服务端必须做容错：对必填 radio 字段，检查是否在 POST/GET 参数中存在，而不是只判空字符串
真正容易被忽略的点：radio 校验失败时，浏览器不会像文本框那样高亮边框或显示气泡——它只在 submit 时卡住并弹提示。用户如果没看到提示、又没刷新页面，可能反复点提交按钮，却不知道问题出在哪。加一句 form.addEventListener('invalid', e => e.preventDefault(), true) 并不行，得靠 reportValidity() 主动唤起反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
