select 的 required 属性常被绕过，因浏览器仅凭 selectedindex===0 且首项 value 为空来判定“已选”，正确写法是首项设 disabled selected 且 value=""；它仅在表单提交时校验，需用 reportvalidity() 主动触发；服务端必须同步校验空值。
select 的 required 属性为什么总被绕过？
因为浏览器判定 select 是否“已选择”的逻辑很机械：它只看 selectedIndex === 0 且第一个 <option></option> 的 value 是空字符串或未定义。如果首项写成 <option value="">请选择</option>，用户没动下拉框，表单就认为“已选中空值”，required 直接失效。
- 正确做法是让首项带
disabled和selected，且value留空：<option value="" disabled selected>请选择</option> - 如果首项有
value="0"或value="null"，哪怕内容是“请选择”，也会被当成有效选项 - 移动端 Safari 在 iOS 12.2 之前完全不支持
select[required]，旧版本用户提交时无任何拦截
required 触发校验的时机和限制
select[required] 只在表单真正提交（type="submit" 按钮点击，或调用 form.submit()）时触发，不会响应 change、blur 或键盘操作。这意味着：
- 用户打开下拉框又关掉，没选任何项，但没点提交——校验压根不运行
- 用 JS 模拟点击（
button.click()）可能不触发 submit 事件，导致校验静默跳过 - 若表单里有多个
required字段，浏览器只聚焦第一个空项（可能是前面的input），select即使为空也可能被忽略
如何手动触发 select 的 required 校验？
当需要在非提交场景下主动检查（比如用户切换 tab 前提示），不能依赖默认行为，得调用原生 API：
const select = document.querySelector('select[required]');
if (!select.checkValidity()) {
select.reportValidity(); // 弹出浏览器默认提示，并聚焦
}
-
checkValidity()返回布尔值，不弹窗，适合做条件判断 -
reportValidity()才会真正触发 UI 提示，但它要求元素在 DOM 中且未被display: none隐藏（hidden属性可接受） - 注意：调用前确保
select已渲染完成；React/Vue 中需在useEffect或mounted后执行
空格、零宽字符和服务端兜底
select 本身不受空格或零宽字符影响，但它的值来自 option[value]，所以问题常出在后端——比如把 value=" "（带空格）当有效值存了，前端却因 value.trim() === "" 判定为空。更关键的是：
-
required是纯前端约束，curl、禁用 JS、绕过表单都能跳过 - 服务端必须检查该字段是否存在、是否为非空字符串（不能只判
isset()或!empty()，要trim($val) !== ''） - 如果后端允许
value="0"或"false"这类 falsy 字符串，前端也得同步校验逻辑，否则体验割裂
最易被忽略的一点：很多人以为给 select 加了 required 就万事大吉，其实它只防“完全不选”，不防“选了个语义上无效的默认项”。真正有效的必选控制，永远需要前后端对空值定义达成一致，并在提交前用 reportValidity() 主动确认状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
