required属性仅在表单提交时触发非空验证，不校验内容正确性；对text、email、url、tel、number、search、password、checkbox、radio、file类型有效，对hidden、button等无效；checkbox要求勾选，radio需同name成组，file须选至少一个文件；空值判定基于原始value是否为空字符串或未选中状态，不调用trim()；未包在form内、非submit按钮、JS直接submit等均导致失效；提示不可定制，移动端Safari支持弱；真正可靠判断依据是element.validity.valueMissing === true；需配合setCustomValidity()、reportValidity()等增强校验。
required 属性能实现非空验证，但只在表单提交时触发，且对内容“有没有”起作用，对“对不对”完全不管——别把它当格式校验用。
哪些 input 类型加 required 才有效
它只对语义明确的输入类型生效：text、email、url、tel、number、search、password、checkbox、radio 和 file；对 hidden、button、submit、reset、image 无效。
checkbox 单独加 required 表示“这个框必须勾选”；radio 必须同 name 成组，required 才表示“这一组里至少选一个”；file 加了 required 意味着“至少选一个文件”，空输入框不通过。
required 判定“空”的真实逻辑
它不调用 trim() 后再比，而是直接看原始值是否满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
- 文本类（
text、email等）：value === ""，输入纯空格" "就算空 -
select：selectedIndex === 0且第一个option的value为空或没写（如<option value="">请选择</option>） -
checkbox/radio：未被选中状态
动态改 value 后没触发 input 或 change 事件，required 不会重新评估——它只读当前 DOM 值，不监听变化。
为什么加了 required 却没反应
常见失效场景不是属性写错了，而是触发条件没凑齐：
- 没包在
<form>标签里，浏览器根本不识别为表单控件 - 提交按钮是
<button type="button">或 JS 直接调form.submit()，跳过了原生验证流程 - 用了
type="number"却填了"123 "（尾部空格），它会被接受；但填"abc"会被拒——required在这里和类型校验混在一起，容易误判 - 移动端 Safari 对提示支持弱，有时只高亮边框、无文字气泡
真正判断“必填未填”的可靠依据是 element.validity.valueMissing === true，而不是 value === ""。
想稳住校验，光靠 required 远不够
它只是起点，不是终点。比如要提示“手机号格式不对”，得用 setCustomValidity()；要手动触发校验并弹出气泡，得调 reportValidity()；要清掉旧错误状态，必须传空字符串：input.setCustomValidity("")，否则永远卡在 invalid 状态。
还有个容易被忽略的点：pattern 和 required 是正交机制——required 管“有没有”，pattern 管“像不像”，两者得一起上才完整。但注意：pattern 对 type="number" 完全无效，别白费劲。
