HTML中input必填校验最直接有效的方式是使用原生required属性，但必须满足四前提：支持类型（text、email、select等）、嵌套form内、submit按钮触发、空值判定基于value（空格算已填）；否则失效。
HTML 中 input 必填项校验最直接有效的方式是使用原生 required 属性，但它不是“加了就自动生效”的开关，而是依赖明确的语义结构和触发条件。真正起效的关键在于类型支持、表单包裹、提交方式和空值判定这四点。
哪些 input 类型支持 required
required 只对具备“可为空”语义的控件生效：
- ✅
<input type="text">、email、number、tel、url、date、file - ✅
<select>（需配合<option value="" disabled selected>默认项） - ✅
<textarea> - ✅
<input type="checkbox">（表示“必须勾选”，非“至少一个”） - ❌
hidden、button、image、range、color、submit等类型写上也无效
required 生效的三个硬性前提
缺一不可，否则形同虚设：
- 必须嵌套在
<form></form>标签内——脱离表单结构，浏览器不识别 required - 提交动作必须触发原生 submit 事件：按钮需为
<button type="submit">或<input type="submit">；type="button"或 JS 直接调form.submit()都绕过校验 - 空值判断只看 DOM 的
value属性：" "（纯空格）算已填，""（空字符串）才算空；placeholder、label、显示文字全不参与判断
常见失效场景与修复方法
加了 required 却没拦住提交？大概率掉进这几个坑：
立即学习“前端免费学习笔记（深入）”；
-
select 默认项写错：用
<option value="">请选择</option>且未加disabled selected→ 用户不动它就一直校验失败。正确写法：<option value="" disabled selected>请选择</option> -
submit 事件里写了 preventDefault() 却没补校验：拦截后必须手动调
form.checkValidity()，否则校验静默失效 -
移动端兼容问题：旧版 iOS Safari（≤15.4）对
file和select的 required 支持不稳定，建议用 JS 降级检测input.reportValidity() -
同名多字段干扰：如两个
name="email"的 input，浏览器只校验第一个，其余被忽略
让提示更可控的实用技巧
浏览器默认提示无法隐藏或定制样式，但可通过 JS 有限干预：
- 用
setCustomValidity("提示文案")覆盖默认提示，但每次输入后必须立刻调setCustomValidity("")清空，否则错误状态持续存在 - CSS 控制视觉反馈：推荐用
input:invalid:not(:placeholder-shown)避免页面一加载就全变红；搭配reportValidity()可实现失焦即提示 - 星号标记必填项：用
label::after { content: " *"; color: #d32f2f; }，同时加aria-required="true"保证读屏器识别
