required对生效需配合disabled selected的空value选项，否则默认选中非空项会导致校验失效；服务端必须二次校验。
required 属性对 <select></select> 生效，但仅保证至少选中一项，且该项的 value 不能为空字符串。如果你的默认选项是 <option value="">请选择</option>，又没加 disabled，用户不操作就提交，浏览器会认为“已选中”，校验通过——这通常不是你想要的。
<select required></select> 为什么有时没效果？
浏览器判断“是否已填”的依据是：是否有
option:selected且其value不为空-
如果你写了：
<select name="city" required><option value="">-- 请选择 --</option> <option value="bj">北京</option></select>
用户没点就提交 →<option value=""></option>被选中 →value是空字符串 →required**视为未通过** ✅（这是正确行为） -
但如果你写了：
<select name="city" required><option value="bj" selected>北京</option> <option value="sh">上海</option></select>
用户没动 →value="bj"已存在 →required**直接通过** ❌（业务上常需避免） -
常见坑：
- 忘记给占位
<option></option>加disabled，导致它可被提交但值为空，校验失效 - 在 JS 中动态设置
selectedIndex = 0，却没同步清空value或设为 disabled - 使用了
hidden或style="display:none"替代disabled→ 浏览器仍可能将其计入选中项
- 忘记给占位
怎么写才能真正强制用户「主动选择」？
必须同时满足两个条件：
-
<select></select>带required - 占位
<option></option>同时具备：value=""+disabled+selected
<select name="status" required><option value="" disabled selected>-- 请选择状态 --</option> <option value="active">启用</option> <option value="inactive">停用</option></select>
这样：
- 页面加载时显示提示文字，但该选项不可点击、不可提交
- 用户必须手动点开并选中一个非
disabled项，否则提交失败 - 浏览器原生校验能正确触发，
checkValidity()返回false，reportValidity()可唤出提示
服务端仍要校验 $_POST['field'] 是否存在且非空
required 是纯前端约束，完全可被绕过：
- 关闭 JS 后手动改 HTML 提交
- 用
curl或 Postman 直接发请求 - 浏览器开发者工具删掉
required属性后提交
PHP 中必须检查：
-
isset($_POST['status']) -
!empty($_POST['status'])（注意：如果用户选了value="0"，empty()会误判，建议用strlen(trim($_POST['status'])) > 0或白名单校验）
关键点其实就一个：disabled selected 的空值 <option></option> 不是“默认值”，而是“无效占位符”——它存在的唯一目的，就是让 required 有东西可拦。
漏掉 disabled，整个逻辑就垮了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
