html下拉菜单默认值被当成“已选择”是因为required校验只检查select.value是否为空字符串，而非用户是否主动选择；默认选项必须显式设value=""才能触发校验，否则innertext会被用作value导致意外通过。
HTML下拉菜单默认值为什么总被当成“已选择”？
浏览器原生表单校验（required）对 <select></select> 的判定逻辑很直接：只要当前选中项的 value 非空，就认为通过校验。问题出在很多人把提示文字（如“请选择”）设为第一个 <option></option>，但没给它设空 value，结果用户没动下拉框，表单却意外通过了。
关键点在于：required 校验的是 select.value 是否为空字符串，不是看用户是否“主动选择”。所以默认选项必须显式设 value=""，且不能依赖 selected 属性本身。
-
<option value="" selected>请选择</option>✅ 正确：空 value 触发 required 校验 -
<option selected>请选择</option>❌ 危险：value 会取 innerText（即“请选择”），非空 → 校验通过 -
<option value="0" selected>请选择</option>❌ 同样危险：value="0" 是非空字符串
如何用 JavaScript 检查下拉菜单是否真的被用户选择过？
纯 HTML required 只能防空提交，无法区分“用户没动”和“用户选了默认项”。如果业务要求必须是有效选项（比如“请选择”不算合法值），就得加 JS 控制。
核心思路：监听 change 事件 + 检查当前 select.value 是否属于预设的有效值列表。不要只比对是否为空。
- 用
dataset或数组维护合法value列表，例如：const validValues = ["user", "admin", "guest"]; - 提交前检查：
if (!validValues.includes(select.value)) { /* 提示错误 */ } - 避免只写
if (!select.value)—— 这会漏掉 value="0"、value="false" 等假值但业务上有效的场景
Chrome/Firefox 对 required 下拉菜单的兼容性差异
主流浏览器对 required 的基础行为一致，但有个容易被忽略的细节：Firefox 在页面加载后首次聚焦 <select></select> 时，若默认项是 value=""，会立即显示原生校验气泡；Chrome 则通常等到提交时才触发。这会影响用户体验节奏。
- 若需统一行为，建议禁用原生校验（移除
required），改用 JS 手动调用reportValidity()控制时机 - 注意：调用
select.reportValidity()前，确保select已渲染完成，否则可能静默失败 - 移动端 Safari 对
select的reportValidity()支持较晚（iOS 15.4+），旧版本需降级处理
后端为什么不能只信前端 required 校验？
因为 required 完全运行在客户端，用户可轻易禁用 JS、修改 DOM 或绕过表单直接发请求。后端收到的 select 字段值，可能是空字符串、非法字符串，甚至根本不存在该字段。
- 后端必须验证该字段是否存在、是否为非空字符串、是否在枚举白名单内
- 不要假设“前端有 required 就不会传空”——攻击者或异常网络请求常导致字段缺失
- 尤其注意：某些框架（如 Express）解析空表单字段时可能返回
undefined而非""，需用== null或in req.body判断存在性
实际开发中，最常被忽略的是默认 <option></option> 的 value 值是否真正为空，以及后端是否对这个字段做了存在性+枚举双重校验。这两处一漏，整个下拉菜单的“必选”逻辑就形同虚设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
