required仅检测value是否为空字符串，无法识别空格、全角空格、换行符等“伪空值”，且动态修改value后需手动调用reportvalidity()更新校验状态，不同input类型对“空”的定义也存在差异。
html 表单里让字段必填，直接加 required 属性就行，但加了不等于真校验成功——浏览器只在提交时触发原生检查，且对空格、隐藏字符、动态内容完全不敏感。
为什么加了 required 还能提交空值？
常见错误现象：用户输了一堆空格、换行符或全角空格，表单照样通过；或者用 js 动态清空了输入框但没重置 validity 状态，导致后续提交跳过校验。
-
required只检测value是否为“空字符串”，" "、" "（全角空格）、"n"都算“非空” - 如果用 JS 修改了
input.value但没调用input.reportValidity()，浏览器不会主动更新校验状态 - 某些 UI 库（如 Ant Design、Element Plus）封装的组件可能没透传
required到底层<input>，实际无效
required 在不同 input 类型下的表现差异
不是所有类型都按直觉工作。比如 type="number" 和 type="date" 对“空”的定义不同，容易误判。
-
<input type="text" required>：只拒绝""，接受" " -
<input type="number" required>：用户删光数字后，value变成""，校验生效；但如果初始设了value="0"，即使用户没改，也算“已填” -
<input type="date" required>：未选择时value是""，校验有效；但 safari 旧版本对空 date 的处理不一致 -
<select required></select>：必须有<option></option>不带disabled且没有selected，否则第一个 option 会被自动选中，绕过校验
怎么补足 required 的短板？
原生 required 是起点，不是终点。关键是要控制“什么算有效输入”，尤其在用户粘贴、自动填充或移动端输入法干扰下。
立即学习“前端免费学习笔记（深入）”；
- 用
input事件 +trim()实时清理空格：el.addEventListener('input', () => { el.value = el.value.trim(); }); - 提交前手动检查：
if (!el.value.trim()) { el.reportValidity(); return false; } - 配合
pattern做语义约束，比如邮箱必填且格式正确：<input required pattern="^[^s@]+@[^s@]+.[^s@]+$"> - 服务端永远要二次校验——
required完全可被禁用或绕过
真正麻烦的从来不是加不加 required，而是用户输入的“空”有几十种形态，而浏览器只认一种。别指望属性自己聪明起来。