17370845950

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 只需一个勾选即满足
• 请选择 A：初始状态满足“未选”，提交时会报错

样式与提示控制：伪类和 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 属性。