HTML原生required属性仅对input、select、textarea生效，需避免在自定义组件或hidden/button类型中使用；submit事件被preventDefault拦截时须手动调用checkValidity()；JS提交表单（form.submit()）不会触发校验，必须显式调用checkValidity()或reportValidity()。
HTML 原生 required 属性就能实现基础必填验证，无需 JS 就能触发浏览器默认提示，但它的行为和兼容性有明确边界，用错反而导致表单卡死或验证失效。
为什么 required 有时不生效？
常见现象：点提交没反应、控制台无报错、输入框明明空着却直接提交成功。
-
required只对<input>、<select>、<textarea>生效，对自定义组件（如<my-input>）完全无效 - 若表单用
event.preventDefault()拦截了 submit 事件，且没手动调用checkValidity()，浏览器原生校验就被跳过 -
type="hidden"、type="button"等类型不支持required，写了也忽略 - 某些旧版 iOS Safari 对
required在<select>上的支持不一致，建议加默认空选项：<option value="">请选择</option>
required 和 aria-required 的区别
required 是功能属性，触发校验逻辑；aria-required="true" 仅是语义标记，供读屏器识别，不影响校验行为。
- 两者可以共存，但不能互相替代：只写
aria-required，表单照样能空提交 - 无障碍场景下建议同时设置：
<input required aria-required="true"> - 如果用 JS 动态控制必填状态，优先操作
element.required = true/false，而非增删aria-required
如何配合 JS 获取校验结果
原生校验后，需要知道是否通过才能决定后续逻辑（比如发请求或聚焦错误项）。
立即学习“前端免费学习笔记（深入）”；
- 监听
submit事件时，直接检查form.checkValidity()返回布尔值 - 想获取具体哪个字段失败？遍历
form.elements，查每个元素的validity.valueMissing属性（true表示因required缺失） - 手动触发校验（比如失去焦点时）：调用
input.reportValidity()，它会显示浏览器默认气泡提示并返回布尔值 - 注意：
reportValidity()在 Firefox 中对<select>的空值判断比 Chrome 更严格，建议统一设value=""为空选项
真正容易被忽略的是：当用 JS 提交表单（如 form.submit()）时，required 校验根本不会触发——这是规范行为，不是 bug。必须显式调用 checkValidity() 或 reportValidity() 来补上这一步。
