html5原生校验通过required属性实现必答强制锁定：单选/多选仅首项加required；文本框、select等直接加required并配minlength或空option；须确保label与input id一致，禁用onsubmit拦截，js提交前需checkvalidity；复杂规则可用setcustomvalidity补充提示。
用 HTML5 原生校验实现问卷必答题的强制锁定，核心是正确使用 required 属性，并配合表单结构与输入类型语义化设计。它不依赖 JS 就能阻止提交、触发浏览器默认提示，且天然支持无障碍和移动端优化。
单选/多选题：只给每组第一个选项加 required
对于一组 radio 或 checkbox，浏览器会把同 name 的控件视为一个逻辑字段。只需在该组中任一选项（通常选第一个）上设置 required，用户未选择时就会报错；其他选项不能重复加，否则会导致多个错误提示或逻辑混乱。
- ✅ 正确写法：同一 name 下仅首个 radio 加 required
- ❌ 错误写法：每个 radio 都加 required，或所有 checkbox 都加
- 示例：
<input type="radio" name="q1" value="a" required> 是，其余同 name 的选项不加 required
填空题与下拉框：直接在 input/select 上加 required
文本输入、数字、邮箱、日期等 type，以及 <select></select>，都原生支持 required。加上后，空值即视为无效，提交时自动拦截。
- 文本类建议搭配
minlength="1"（防纯空格），比仅靠 required 更健壮 - select 推荐设置一个空选项作为默认项，value 为空：
<option value="">请选择</option>，再加 required 才有效 - 移动端会自动弹出对应键盘（如数字键盘、日期选择器），提升填写效率
避免常见陷阱：结构与交互细节
原生校验看似简单，但几个细节没处理好，就会“看起来加了 required 却没效果”。
- 确保
<label for="xxx"></label>和对应<input id="xxx">的 id 完全一致，否则点击标签无法聚焦，影响可访问性与操作体验 - 不要用
onsubmit="return false"全局屏蔽提交，它会绕过原生校验机制 - 若用 JS 主动调用
form.submit()，需先手动执行form.checkValidity()判断，否则跳过校验 - 禁用按钮做防重复提交时，校验失败必须同步恢复按钮状态并聚焦到首个错误项，否则用户无法继续操作
进阶控制：用 setCustomValidity 补充语义化提示
当 required 不足以表达业务规则（比如“至少选两项”、“不能全选相同选项”），可在 JS 中监听 submit 或 input 事件，用 element.setCustomValidity("提示文字") 覆盖默认提示，同时保持原生校验流程。
- 调用
setCustomValidity("")表示通过；非空字符串表示失败并显示该文字 - 搭配
element.validationMessage可读取当前错误信息，用于自定义展示区域 - 注意：该方法不影响 required/pattern 等属性本身，只是增强反馈
