HTML5表单实时校验应监听input事件并手动调用checkValidity()，它更新伪类但不显示提示；需结合CSS反馈、validationMessage及防抖策略，并在submit时拦截验证。
在 HTML5 表单中，checkValidity() 不会自动触发，必须手动调用；但要“用户修改后立即校验”，关键不是靠某个单一事件，而是结合合适的事件时机 + 正确的调用方式。
监听 input 事件（推荐）
input 事件在用户每次输入、粘贴、删除、撤销等导致值变化时立即触发，且兼容现代浏览器（包括移动端），是实时校验最可靠的时机。
- 对
<input>、<textarea>、<select>都有效 - 避免使用
change（需失焦才触发）或keyup（漏掉粘贴/拖入等操作） - 调用
checkValidity()后，元素自身会更新:valid/:invalid伪类，CSS 可即时响应
示例：
<input type="email" required id="email">
<script>
const input = document.getElementById('email');
input.addEventListener('input', () => {
input.checkValidity(); // 触发校验，更新 validity 状态和伪类
});
</script>
注意：校验结果不会自动显示错误提示
checkValidity() 只返回布尔值并更新内部状态（如 input.validity.valid），但不会自动弹出浏览器默认提示（如 title 或气泡）。如需视觉反馈：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 样式响应
:valid/:invalid（例如边框变色） - 手动读取
input.validationMessage显示自定义提示 - 配合
setCustomValidity('') / setCustomValidity('错误信息')控制校验逻辑
避免重复校验或干扰用户体验
某些场景下（如空值、未完成输入），过早提示可能不友好。可加简单策略：
- 对必填字段，仅当
input.value.trim() !== ''时才校验（避免输入中途就标红） - 邮箱等格式字段，可延迟 300ms 防抖（防连续输入频繁触发）
- 提交时仍需再调用一次
checkValidity()—— 因为用户可能跳过输入直接点提交
补充：表单级校验与 submit 拦截
若需整个表单实时反馈，可监听表单的 input 事件（事件冒泡），再遍历子控件调用 checkValidity()；提交时建议用 event.preventDefault() + form.checkValidity() 统一控制：
<form id="myForm">
<input type="email" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault(); // 阻止默认提交
// 可聚焦首个无效项或显示汇总提示
}
});
</script>
