最可靠表单验证入口是form submit事件，需preventDefault后调checkValidity/reportValidity；禁用按钮click验证；实时验证须防抖；自定义错误用setCustomValidity；type="number/date"需注意兼容性问题。
表单提交前用 addEventListener('submit') 拦截验证
直接给 <form> 绑定 submit 事件，调用 event.preventDefault() 阻止默认提交，再手动检查字段值。这是最可靠、兼容性最好的入口点，比监听 input 或 blur 更稳妥——毕竟用户可能跳过某些字段直接点提交。
常见错误：在按钮上绑 click 事件做验证。这样会漏掉回车提交、form.submit() 调用等场景。
checkValidity() 和 reportValidity() 的实际用途
原生表单验证 API 不是摆设，但得知道它什么时候真起作用。调用 input.checkValidity() 只返回布尔值；而 input.reportValidity() 会触发浏览器默认提示（如“请填写此字段”），并返回结果。两者都依赖 required、type="email"、pattern 等 HTML 属性。
注意：这些方法对 disabled 或 display: none 的元素返回 true（视为跳过），但对 hidden 属性或 visibility: hidden 的元素仍会校验。
立即学习“Java免费学习笔记（深入）”；
-
form.checkValidity()检查所有可交互子控件，任一失败即返回false -
form.reportValidity()会统一弹出首个无效字段的提示，适合快速启用基础验证 - 自定义错误消息要用
input.setCustomValidity('错误信息')，传空字符串表示“有效”
实时验证时避开 input 事件的性能陷阱
监听 input 做实时反馈（比如邮箱格式红/绿提示）很常见，但高频触发会导致卡顿，尤其在中文输入法下——每次选词都会发 input。正确做法是加防抖（debounce），延迟 300ms 再执行验证逻辑。
别用 keyup 替代 input：它捕获不到粘贴、拖入、语音输入等操作；也别在 input 里直接调 reportValidity()，否则用户还没输完就看到红色提示，体验极差。
- 防抖函数可用
setTimeout+clearTimeout手写，无需引入 Lodash - 邮箱、手机号等格式验证，优先用
input.validity.valid（配合type和pattern），比正则更轻量 - 密码强度等复杂规则，等用户离开字段（
blur）再跑，别每敲一个字都算熵值
处理 type="number" 和 type="date" 的特殊行为
这类控件看似省事，但坑不少：type="number" 的 value 是字符串，且用户清空时值变成空字符串而非 '' 或 undefined，导致 Number(input.value) === 0 判断失效；type="date" 在 Safari 中不支持 min/max 提示，且 valueAsNumber 在部分版本返回 NaN。
安全做法：读取时统一用 input.value || null，转换数值前先 if (input.value === '') return null；日期字段建议降级为 type="text" + 自定义日历组件，或用 input.valueAsDate（注意兼容性）。
-
type="number"的上下箭头点击会触发input事件，但值为''时valueAsNumber是NaN -
type="date"在 iOS Safari 中 placeholder 不显示，且无法通过 JS 设置无效日期（如'2023-13-01'） - 所有类型控件的
validity对象字段（如badInput、rangeOverflow）应逐个判断，别只看valid
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// 这里发起 fetch 或其他提交逻辑
});
表单验证真正的难点不在写逻辑，而在平衡即时反馈和用户耐心——提示太慢，用户已提交；提示太勤，用户觉得被监视。HTML 原生属性能覆盖 70% 场景，剩下的务必结合具体输入法、OS 和浏览器行为来调。 
