在submit事件中调用checkValidity()本身不会触发原生校验提示，必须允许表单走默认提交流程；仅当校验失败时调用preventDefault()，才能保留浏览器自动渲染的错误UI。
在表单的 submit 事件中调用 checkValidity()，**本身不会触发原生校验提示（如红色边框、气泡提示）**，除非该方法是在用户交互（如点击提交按钮）引发的默认行为过程中被调用，且表单未被显式阻止默认行为。
要让原生校验 UI 正常出现，关键不是“手动调用 checkValidity()”，而是**允许表单自然走默认提交流程**——此时浏览器会在真正提交前自动调用 checkValidity() 并展示错误提示。但如果你需要在提交前插入自定义逻辑（比如记录日志、动态添加规则），又不破坏原生校验体验，可以这样处理：
✅ 正确做法：submit 中只做检查，不阻止默认行为（除非校验失败）
在 submit 事件处理器中，先调用 form.checkValidity() 判断，仅当返回 false 时才 event.preventDefault() —— 这样浏览器已有机会在阻止前渲染原生错误提示。
- 浏览器在触发
submit事件前，已内部执行过一次校验，并准备好了 UI 反馈 - 你调用
checkValidity()只是读取结果，不影响已触发的视觉反馈 - 如果校验通过，不调用
preventDefault()，表单正常提交；失败则阻止，让用户修正
⚠️ 常见错误：提前 preventDefault() 破坏了原生校验
下面写法会导致“没提示、没高亮、直接静默失败”：
立即学习“Java免费学习笔记（深入）”；
form.addEventListener('submit', e => {
e.preventDefault(); // ❌ 错误：一进来就阻止，浏览器没机会显示校验 UI
if (!form.checkValidity()) {
return;
}
// ...后续提交逻辑
});
此时 checkValidity() 虽返回 false，但浏览器的视觉反馈已被拦截，用户看不到哪里错了。
? 补充技巧：手动触发校验提示（非必需，慎用）
极少数场景需在非 submit 时机（如离开字段时）主动触发校验 UI，可用：
-
input.reportValidity()：对单个表单控件触发校验并显示提示（兼容性好） -
form.reportValidity()：对整个表单触发校验和提示（IE 不支持，现代浏览器 OK）
注意：reportValidity() 会强制显示提示，即使字段当前值合法（比如空值 + required），适合用户主动点击“检查”按钮的场景。
? 实用示例：带日志的 submit 处理
form.addEventListener('submit', e => {
console.log('提交触发，开始校验…');
if (!form.checkValidity()) {
console.warn('校验失败，阻止提交');
e.preventDefault(); // ✅ 仅失败时阻止
return;
}
console.log('校验通过，继续提交');
// ✅ 此处可发请求、跳转等，不阻止默认行为即走原生提交
});
只要不提前阻止默认行为，原生校验就会按预期工作 —— 无需额外调用 reportValidity()，也不用模拟提示。
