required属性仅在原生表单提交时触发验证，不实时监听；对自定义组件无效；空格字符串视为已填写；javascript调用form.submit()会跳过验证；服务端必须二次校验。
required 属性只在表单提交时触发验证
它不是实时监听输入变化，也不会阻止用户聚焦或输入空内容——只有调用 form.submit() 或用户点击原生 <button type="submit"></button> 时，浏览器才检查所有带 required 的字段是否为空。如果任一字段为空，会中断提交、聚焦到第一个违规字段，并显示默认气泡提示（如“请填写此字段”）。
- 仅对
<input>、<select></select>、<textarea></textarea>生效，对自定义组件（如封装的Input组件）无效 - 空字符串、
null、undefined都算“未填写”，但带空格的字符串（如" "）不算空，会通过验证 - 若字段有
value初始值（哪怕为空字符串），且没被用户修改过，部分浏览器可能跳过验证（行为不一致，不建议依赖）
required 不生效的常见原因
最常踩的坑是表单没走原生提交流程：比如用了 event.preventDefault() 却没手动校验；或者用 fetch 提交但完全绕过了表单的 submit 事件。
- JavaScript 中调用
form.submit()方法会**跳过**内置验证（这是规范行为） - 给按钮加了
type="button"而非type="submit"，导致不触发表单 submit 事件 -
input元素被设为disabled或hidden（display: none不影响，但hidden属性会让该字段被忽略验证） - 同名字段多个（如多个
name="email"），浏览器只校验第一个
配合 checkValidity() 手动触发验证
当需要在非提交时机（比如用户离开字段时）主动校验，或想统一控制提示方式，就得用 JS 主动干预：
const input = document.querySelector('input[required]');
input.addEventListener('blur', () => {
if (!input.checkValidity()) {
input.reportValidity(); // 显示原生提示
}
});
-
checkValidity()返回布尔值，不弹提示；reportValidity()才会触发 UI 提示 - 对整个表单调用
form.checkValidity()可批量判断，但不会高亮具体字段 - 注意：若字段有
pattern或minlength等其他约束，checkValidity()也会一并检查
服务端永远要二次校验 required 字段
前端 required 完全可被绕过：禁用 JS、删掉属性、用 curl 直接 POST 空数据……所以后端收到请求后，必须独立检查关键字段是否缺失或为空白（trim 后长度为 0）。
- 不要信任
req.body.field !== undefined—— 前端可能根本没传这个 key - 对字符串字段，推荐用
field?.trim() === ""判断，而非仅!field（避免把"0"、"false"当空） - 框架如 Express + Joi、Django REST Framework、Spring Validation 都提供声明式必填规则，比手写 if 更可靠
浏览器验证只是用户体验层的快捷反馈，它的存在意义是减少无效请求，而不是替代服务端防护。真正容易被忽略的是：当多个字段联动必填（比如“选了 A 就必须填 B”），required 属性本身无法表达这种逻辑，只能靠 JS 控制属性开关和手动校验。
