required属性仅对input（非hidden、button等）、select和textarea生效，不支持div、contenteditable或自定义组件；仅在表单submit时校验空值，提示不可定制，服务端必须二次校验。
required 属性只对特定表单控件生效
required 是原生 HTML5 表单验证属性，但它不是万能的。它仅对 <input>（type 不为 hidden、image、button 等）、<select> 和 <textarea> 有效。对 <div> 包裹的自定义组件、contenteditable 元素或第三方 UI 库（如 Ant Design、Element Plus）封装的输入框完全无效。
常见错误是给 <input type="hidden"> 加 required，浏览器会直接忽略——因为隐藏域本就不参与用户交互，验证逻辑上无意义。
- 支持的典型场景：
<input type="text">、<input type="email">、<input type="number">、<select>、<textarea> - 不支持但常被误用：
<input type="hidden">、<input type="button">、<input type="range">（虽可聚焦，但空值无法触发 required 提示） - 注意：空格字符串（
" "）会被视为“已填写”，required不做 trim 校验
required 触发时机和默认行为
浏览器只在表单提交（submit 事件）时检查 required 字段是否为空值（value === ""）。它不会监听输入过程、失焦（blur）或实时校验。
一旦检测到必填项为空，会：
- 阻止表单提交
- 将焦点移到第一个未填写的
required元素上 - 显示浏览器原生提示气泡（内容不可定制，如 Chrome 显示“请填写此字段”）
这个行为无法通过 CSS 完全隐藏（::-webkit-validation-bubble 等伪元素支持有限且不跨浏览器），也不响应 JavaScript 的 preventDefault() 来接管提示逻辑——它是 UA（用户代理）层硬编码的行为。
立即学习“前端免费学习笔记（深入）”；
required 与 JavaScript 验证的协作边界
别指望只靠 required 做完整校验。它只判断“是否为空”，不处理格式（如邮箱格式）、长度、依赖逻辑（如“密码确认需与密码一致”）或异步校验（如用户名是否已存在）。
实际项目中应分层处理：
- 用
required拦住最基础的空值提交，减少无效请求 - 用
checkValidity()和reportValidity()主动触发校验（例如按钮点击时） - 用
setCustomValidity()覆盖默认提示（注意：设为空字符串才能恢复原生校验） - 服务端必须重复校验——
required可被禁用、绕过或伪造
示例：手动触发并捕获结果
document.querySelector('form').addEventListener('submit', e => {
if (!e.target.checkValidity()) {
e.preventDefault(); // 阻止默认提交，以便自定义处理
}
});
兼容性与无障碍注意事项
required 在 IE10+、Edge、Chrome、Firefox、Safari（iOS 5.1+）均支持，但旧版 Android WebView（4.4 以下）有 bug：部分 input 类型下不触发提示。
更关键的是无障碍（a11y）：屏幕阅读器会读出 required 属性（如“姓名，必填，文本输入”），但仅当元素有恰当的 label 关联（用 for/id 或嵌套）才可靠。没有 <label> 的 required 输入框，对视障用户等于“悄悄必填”。
容易被忽略的一点：required 不影响 tabindex 或焦点顺序，但若某 required 元素被 display: none 或 visibility: hidden 隐藏，它仍会参与校验——这可能导致提交失败却找不到原因。
