HTML下拉框加required属性可实现必填验证，但需确保默认提示项同时设value=""、disabled和selected，且其他选项value非空；浏览器原生验证仅拦截submit事件，JS提交需手动调用checkValidity()，服务端仍须校验。
HTML下拉框加 required 属性就能必填
只要在 <select> 标签上加上 required，浏览器原生表单验证就会生效——用户没选任何选项时，提交会失败并弹出提示。但要注意：这个“没选”指的是选中项的 value 为空字符串（""），不是指有没有 <option>。
为什么加了 required 还能提交成功？
常见原因是第一个 <option> 的 value 是空字符串，且被默认选中。浏览器认为“已选”，验证就通过了。比如：
<select required> <option value="">请选择</option> <option value="1">苹果</option> <option value="2">香蕉</option> </select>
这种写法实际无效。解决方法是：
- 把默认提示项的
value设为""，同时加disabled和selected，让它不可提交、仅作提示 - 确保其他可选项的
value都是非空字符串
正确写法：
立即学习“前端免费学习笔记（深入）”；
<select required> <option value="" disabled selected>请选择水果</option> <option value="apple">苹果</option> <option value="banana">香蕉</option> </select>
required 在不同浏览器里的表现差异
所有现代浏览器都支持 required，但提示文案和触发时机略有不同：
- Chrome / Edge：点击提交按钮时校验，提示“请填写此字段”
- Safari：同样触发，但提示语是中文（系统语言决定）
- Firefox：支持，但若用户用键盘切换选项后未释放焦点，可能延迟提示
注意：required 不会阻止 JS 提交（比如 form.submit()），它只拦截原生 submit 事件。如果用 JS 手动提交，得自己调用 checkValidity()：
const select = document.querySelector('select[required]');
if (!select.checkValidity()) {
select.reportValidity(); // 触发原生提示
}
服务端仍需校验，不能只靠 required
required 是纯前端约束，用户禁用 JS、绕过表单、用 curl 提交，都能跳过它。后端收到请求时，必须检查该字段是否存在且非空值。例如 Node.js 中判断 req.body.fruit !== undefined && req.body.fruit.trim() !== ""；Python Flask 中用 request.form.get("fruit") 并判空。
另外，别忽略空格干扰——用户可能手动修改 HTML 把 value 改成 " "（空格），所以后端建议做 trim() 再校验。
