required仅对input、select、textarea生效，且对hidden/button/reset等type无效；checkbox需勾选，radio需同name至少一选项选中；select需空value默认项；textarea空格视为有内容；校验提示不可定制，需JS增强或接管。
required 属性只对特定表单控件生效
required 是原生 HTML5 表单验证属性，但它不是万能的——它只在 <input>、<select>、<textarea> 这三类元素上起作用，且对某些 type 值无效（比如 type="hidden"、type="button"、type="reset"）。浏览器会自动阻止表单提交，并聚焦到第一个缺失值的 required 元素上。
-
required对<input type="checkbox">和<input type="radio">也有效，但逻辑不同：前者要求勾选，后者要求至少一个同name的选项被选中 -
<select>必须有一个空值<option value="">作为默认项，否则即使加了required也会被绕过（因为默认已选中非空值） -
<textarea>空格、换行符会被视为“有内容”，所以用户只打空格也能通过校验；如需严格非空白，得用 JS 配合trim()
required 不会触发自定义提示，但可配合 :valid/:invalid 伪类
浏览器默认的错误提示（如 Chrome 的“请填写此字段”）无法修改文案，也不能用 JS 直接拦截显示时机。但你可以用 CSS 控制视觉反馈：
input:invalid { border-color: #e53e3e; }
input:valid { border-color: #38a169; }
input:required { border-left: 3px solid #3182ce; }
-
:invalid在输入为空或格式不满足（如type="email"输入了 "abc"）时生效，required只是其中一种触发条件 - 注意：刚加载页面时，未聚焦的
required输入框可能处于:invalid状态，导致初始红边；可用:user-invalid（Chrome 102+、Firefox 107+）来只对用户交互后失效的做样式 - 如果用了
pattern，记得正则开头加^、结尾加$，否则部分匹配也会被当成有效
required 与 JavaScript 校验不是互斥关系
很多人误以为加了 required 就不用写 JS 了，其实不然。原生校验仅在表单提交时触发，且无法覆盖业务逻辑（比如“手机号必填，但仅当选择了‘需要联系’复选框时才生效”）。
- JS 中可通过
element.checkValidity()主动触发校验，返回true/false；用element.validationMessage获取当前错误文案（含浏览器默认提示） - 监听
invalid事件可捕获校验失败，但该事件不冒泡，且无法取消默认提示弹窗；如需完全接管，建议禁用原生校验：form.noValidate = true，再自行实现 - 动态增删
required要用element.required = true/false，而不是操作字符串属性：element.setAttribute('required', '')容易出错（比如重复添加）
移动端和旧版浏览器的兼容性盲区
required 在 IE10+、Edge 12+、Chrome 10+、Firefox 4+、Safari 5+ 支持良好，但 iOS Safari 12.2 之前对 type="date" + required 有 bug：即使选了日期，仍报空值。Android WebView 也有类似问题。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
required做唯一校验防线，后端必须重复验证（空值、类型、长度、业务规则） - 若需支持 IE9 或更老环境，用 JS 模拟：遍历所有
[data-required]元素，提交前检查.value.trim() === '' - 使用
required时避免和第三方 UI 库（如 Ant Design、Element Plus）的表单组件混用，它们通常屏蔽原生属性，走自己的校验逻辑
required 最适合静态、确定必填的字段；一旦出现条件必填、联动校验、异步验证（如用户名是否已存在），就得立刻切换到 JS 方案。别让它成为你校验逻辑的天花板。 
