required属性可触发浏览器原生验证，但仅对空字符串生效，不校验空格或placeholder；需配合submit事件或checkValidity()使用，并用setCustomValidity()自定义提示。
required 属性本身就能触发浏览器原生验证
HTML5 的 required 是布尔属性，加在 <input>、<select>、<textarea> 上后，表单提交时浏览器会自动拦截空值并显示默认提示（如 Chrome 弹 tooltip，Firefox 在字段旁标红）。不需要 JS 就能工作，但前提是表单通过原生 submit 触发——用 button type="submit" 或回车提交才有效。
常见误区是给按钮加 onclick 调用 JS 提交，这会绕过 required 校验。如果必须用 JS 提交，得手动调用 checkValidity()：
document.querySelector('form').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault(); // 阻止提交
}
});
required 不校验“看似有值”的空格或占位符
required 只检查值是否为 ""（空字符串），对纯空格、 、或用户只输入空格后 Tab 离开的字段完全不敏感。比如 <input required value=" "> 会被认为已填写。
- 解决办法：提交前用
trim()判断，或监听blur时清理首尾空格 - 更稳妥的是在 JS 校验中补充：
input.value.trim() === "" -
placeholder文本不影响required判断，它只是视觉提示，不能当默认值用
不同 input type 对 required 的行为差异
required 在多数类型下表现一致，但几个关键类型要注意：
立即学习“前端免费学习笔记（深入）”；
-
<input type="number">：空值时.value是""，符合预期；但输入非数字（如 "abc"）时，.value仍为""，也会被required拦截——这其实是好事，等于同时做了格式+非空校验 -
<input type="checkbox">：只有勾选时才算“有值”，未勾选即为空，required会强制用户勾选 -
<input type="file">：未选文件时.files.length === 0，required生效；但注意 iOS Safari 旧版本对 file input 的required支持不稳定 -
<select>：必须设置一个<option>的value=""且设为selected，否则第一个 option 即使内容是 “请选择”，只要它有非空 value，就会绕过required
自定义错误提示文案不能靠 required alone 实现
浏览器默认提示（如 “请填写此字段”）无法用 required 属性修改。要换提示语，必须用 JS 的 setCustomValidity()：
const input = document.querySelector('input[required]');
input.addEventListener('invalid', function(e) {
e.target.setCustomValidity('手机号不能为空');
});
input.addEventListener('input', function() {
this.setCustomValidity(''); // 清空，否则后续校验会一直失败
});
注意两点：一是必须在 invalid 事件里设文案，二是每次用户输入后要清空，否则即使填了内容，校验仍会报错。另外，setCustomValidity('') 和 setCustomValidity(null) 效果不同，后者不会清除错误状态。
真正难处理的是跨浏览器一致性——比如 Safari 对 invalid 事件触发时机和 tooltip 位置控制很弱，这时候往往得放弃原生提示，改用 JS + ARIA 手动管理错误态和文案。
