用 required 属性可实现单选题必选原生校验，需为同一 name 的所有 radio 都加 required；多选题 checkbox 不支持“至少选一”的原生校验，须用 JS 拦截 submit 并统计 checked 数量；select 必须配合 disabled selected 的空 option 才能触发 required 校验。
用 required 属性最简实现单选/多选必选
浏览器原生校验能直接拦截提交，不用写 JS 就能保证每题至少选一项。关键在于：只有带 required 的表单控件在为空时才会触发校验提示。
对单选题（<input type="radio">），必须让同一 name 下的所有选项都加 required —— 否则只给其中一个加，用户不选它但选了其他同名项，校验就通过了；而浏览器实际只检查「该组是否有任意一个被选中」，所以全部加是安全写法。
<input type="radio" name="q1" value="a" required><input type="radio" name="q1" value="b" required><input type="radio" name="q1" value="c" required>
多选题（<input type="checkbox">）通常不适用 required，因为「至少选一个」无法靠单个控件的 required 表达——它只校验该 checkbox 是否被勾选，而不是整组。这时候得用 JS。
Checkbox 多选题“至少选一个”的 JS 校验逻辑
HTML 原生不支持“一组 checkbox 中至少选 N 个”，必须用 JS 拦截 submit 事件并手动检查。
立即学习“前端免费学习笔记（深入）”；
核心思路：获取所有同名 checkbox，统计 checked 数量，小于最小值就 event.preventDefault() 并提示。
document.querySelector('form').addEventListener('submit', function(e) {
const checks = document.querySelectorAll('input[name="q2"]:checked');
if (checks.length === 0) {
e.preventDefault();
alert('第2题至少选择一项');
}
});
注意点：
- 用
querySelectorAll('input[name="q2"]:checked')直接拿已勾选项，比遍历再判断checked更简洁 - 别用
getElementsByName，它返回的是 HTMLCollection，不支持forEach，且类型判断更麻烦 - 如果题目允许「选 2 项以上」，把
=== 0改成< 2即可
下拉框（<select>）怎么设默认空选项并强制选择
<select> 必须配合一个禁用且选中的空 <option>，再加 required，才能真正实现“非空选择”。
错误写法：<select required><option value="a">A</option></select> —— 浏览器会把第一个 option 当作默认值，即使没显式 selected，也会通过校验。
正确写法：
<select name="q3" required> <option value="" disabled selected>请选择</option> <option value="x">选项X</option> <option value="y">选项Y</option> </select>
-
disabled防止用户选中这个空项（否则提交时值为空，但校验仍通过） -
selected让它初始显示，提升体验 - value 为空字符串
""，配合required才会触发校验失败
校验失败后用户看不到提示？检查这几个地方
原生 required 提示依赖浏览器行为，但容易被隐藏或失效：
- CSS 里写了
input:invalid { border: none; }之类重置样式，可能掩盖红色边框和 tooltip - 表单用了
display: none切换页面，而校验只在 visible 元素上触发 —— 需要手动调用checkValidity()并处理invalid事件 - 移动端 Safari 对
required的 tooltip 支持不稳定，建议加 JS fallback 提示（比如在 input 下方插入<div class="error"></div>） - 如果用了
formnovalidate按钮（如“暂存”），确保它不会干扰主提交按钮的校验逻辑
最稳妥的做法是：原生 required + JS checkValidity() 主动触发 + 自定义提示 DOM，三者不互相替代，而是分层兜底。
