单选按钮必选校验不能仅依赖required属性，因其在safari旧版、部分android webview等环境中支持不一致，且无法动态控制提示或阻止逻辑；须用js通过按钮name定位radio组并检查:checked状态，同时服务端必须兜底校验。
单选按钮必选校验不能只靠 required 属性完事——它在部分浏览器（如 Safari 旧版、某些 Android WebView）中对 radio 组支持不一致，且无法动态控制提示文案或阻止后续逻辑。
为什么 required 在 radio 上表现不稳定
虽然 HTML5 允许给任意 <input type="radio"> 加 required，但规范只要求“该组中至少一个被选中”，而浏览器实现差异大：
- Chrome / Edge：只要同 name 组中有一个带
required，未选时会触发原生提示，表单 submit 被阻断 - Safari（≤16.6）：忽略 radio 的
required，submit 仍可执行，后端收不到值 - 移动端 WebView（尤其微信内置）：部分版本完全不渲染验证气泡，用户无感知
- JS 动态插入的 radio：
required属性可能不被重新解析，校验失效
用 JavaScript 做健壮的必选检查
核心是避开遍历、避免硬编码 name，直接从触发源反推目标组：
- 给提交按钮（如
<button type="button"></button>）设name属性，值等于对应 radio 组的name - 监听按钮 click，用
document.querySelector('input[name="' + groupName + '"]:checked')查是否存在选中项 - 查不到就 focus 到第一个 radio（提升可访问性），并给出明确提示
示例代码：
document.querySelectorAll('.next-step-btn').forEach(btn => {
btn.addEventListener('click', function() {
const groupName = this.name;
const checked = document.querySelector(`input[name="${groupName}"]:checked`);
if (!checked) {
alert(`请先选择「${groupName}」中的一个选项`);
const firstRadio = document.querySelector(`input[name="${groupName}"]`);
if (firstRadio) firstRadio.focus();
return;
}
// 继续下一步逻辑
});
});
服务端必须兜底校验
前端校验只是体验优化，不能替代服务端判断：
- 所有 radio 提交字段，在后端必须检查是否为非空字符串（不是
null或空格） - 不要假设字段一定存在——如果整组 radio 都没选，有些浏览器（如 Firefox）根本不会把该
name发送到服务端 - 校验失败时返回 HTTP 400，并附带明确错误字段名（如
{"error": "question_step1: required"}），方便前端定位
最容易被忽略的一点：当单选按钮被包裹在 <fieldset disabled></fieldset> 里时，:checked 查询永远为空，且 required 完全失效——这种禁用状态必须由 JS 控制显隐，而不是靠 disabled 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
