HTML5中required属性仅适用于input（除hidden/button/image）、select、textarea等有值概念的表单控件，校验逻辑仅判断是否为空值或未选中，不处理空格、零值等语义内容，且需配合JS和后端双重验证确保可靠性。
HTML5 中标记表单必填项，直接给 input、select、textarea 等表单控件加上 required 属性即可，浏览器会自动校验且阻止提交——但这个属性的行为和兼容性有细节陷阱，不能只加了就完事。
哪些元素支持 required 属性
只有可填写、有值概念的表单控件才支持 required。常见支持的包括：
-
input（类型为text、email、password、number、checkbox、radio、file等，但hidden、button、image不支持） -
select（注意：必须至少有一个option没有disabled且没设selected，否则可能绕过校验） textarea
不支持的典型例子：fieldset、label、output、自定义 Web Component（除非手动实现 validity API）。
required 的实际校验逻辑
浏览器只检查控件的 value 是否为空字符串（''）、未选中（checkbox/radio）、或未选择（select 的第一个选项是 disabled 且无其他 selected）。它不关心空格、换行、零值等语义内容。
立即学习“前端免费学习笔记（深入）”；
-
：输入纯空格会被认为“已填写”，校验通过 -
：清空后值为''，触发校验；但输入0是合法值 -
：仅当未勾选时阻塞提交；多个同名checkbox只需一个勾选即满足 -
：初始状态满足“未选”，提交时会报错
样式与提示控制：伪类和 setCustomValidity()
原生 required 触发失败时，浏览器会显示默认气泡提示（内容不可控），且只在提交时触发。如需更精细控制，得配合 JS：
- 用
:valid/:invalid伪类做实时样式反馈（注意：:invalid在页面加载后立即生效，哪怕用户还没输） - 调用
element.setCustomValidity('')清除自定义错误，setCustomValidity('请填写邮箱')覆盖默认提示 - 必须在
input或change事件里动态设置，否则提交时仍用旧提示
移动端与兼容性注意事项
Android WebView（尤其旧版）对 required 支持不稳定；iOS Safari 对 type="number" + required 组合在校验时机上可能延迟；部分国产浏览器会忽略 required 但保留样式伪类。
- 不要依赖
required做唯一校验手段，后端必须重复验证 - 若需兼容 IE9 及更早版本，必须用 JS 手动校验（
required完全不识别） - 移动端建议搭配
pattern和title提升提示友好度，例如：
真正关键的是：校验逻辑是否覆盖所有边界输入（比如粘贴空格、自动填充、屏幕阅读器跳过），而不是仅仅加了个 required 属性。
