select元素添加required属性可触发浏览器原生必填验证，但必须配合value=""的默认option，否则无效；title属性对验证无作用，自定义提示需用setcustomvalidity()。
select 元素用 required 触发浏览器原生验证
HTML 下拉框（select）本身不支持 title 属性显示验证提示——title 只是悬停气泡，和表单验证无关。真正触发“请选一项”这类提示的，是 required 属性配合一个空的默认 option。
关键点在于：浏览器只对值为空（value=""）且带 required 的 select 做必填校验，提交时自动弹出提示（内容由浏览器决定，不可自定义）。
- 第一个
option必须是<option value="">请选择</option>，不能写成value="null"或value="0" -
select标签必须显式添加required，仅靠 JS 或 CSS 无法激活原生验证 - 若已有默认选中项（比如
value="1"），即使加了required，也不会被校验为“未选择”
<select name="category" required> <option value="">-- 请选择分类 --</option> <option value="news">新闻</option> <option value="blog">博客</option> </select>
想自定义提示文字？得用 setCustomValidity()
浏览器原生提示（如 Chrome 显示“请填写此字段”）无法修改。要显示“请选择有效分类”，必须用 JS 干预验证流程：
- 监听
change或submit事件 - 调用
select.setCustomValidity("错误信息")设置提示 - 选中有效值后，必须调用
select.setCustomValidity("")清空，否则后续验证始终失败 - 注意：空字符串
""表示“验证通过”，非空字符串才触发提示
const select = document.querySelector('select[name="category"]');
select.addEventListener('change', () => {
if (select.value === '') {
select.setCustomValidity('请选择一个有效分类');
} else {
select.setCustomValidity('');
}
});
title 在 select 上基本没用
title 属性在 select 标签上不会影响验证行为，也不在移动端稳定触发；部分浏览器甚至完全忽略它。它唯一可能起作用的场景是：鼠标悬停在下拉箭头或边框上时，极小概率显示气泡——但这和验证提示毫无关系，也不可控。
立即学习“前端免费学习笔记（深入）”；
- 不要写
<select title="必选项"></select>试图替代验证逻辑 - 如果真需要辅助说明，用
<label></label>或旁边加<small></small>文字更可靠 - 移动端几乎不响应
title，别依赖它传达关键规则
兼容性与真实提交前的检查
原生 required 验证在 IE10+、Chrome、Firefox、Safari（桌面端）都可用，但 iOS Safari 对 select 的 required 支持不稳定——某些版本点击提交无反应，需 JS 补充兜底。
- 服务端永远要二次校验，前端验证纯属用户体验优化
- 用
form.checkValidity()可主动触发验证（比如在按钮点击时），避免依赖用户点提交按钮 - 若用 AJAX 提交，务必在发送前调用
form.reportValidity()，它会触发验证并返回布尔值
document.querySelector('form').addEventListener('submit', (e) => {
if (!e.target.checkValidity()) {
e.preventDefault(); // 阻止默认提交
}
});实际开发中最容易漏掉的，是 JS 中忘记清空 setCustomValidity("")，导致一次错误后永远报错；还有就是把空 option 的 value 写成空格或 " "，浏览器认为它有值，跳过验证。
