应在form的submit事件处理器中调用自定义校验函数，通过event.preventDefault()阻止默认提交，遍历表单元素执行规则校验并返回布尔值，失败时标记首个错误字段并聚焦。
如何在表单提交前统一调用自定义校验函数
HTML 表单本身不提供「全局校验钩子」，必须拦截 submit 事件并手动触发校验逻辑。直接给 form 绑定 onsubmit 或用 addEventListener('submit', ...) 是唯一可靠入口，否则浏览器会跳过 JS 校验直接提交。
常见错误是只对单个 input 绑定 blur 或 input 事件——这只能做局部反馈，无法阻止表单提交。
- 务必在事件处理器中调用
event.preventDefault()，否则校验通过与否都不影响提交行为 - 校验函数应返回布尔值：
true表示所有字段通过，false表示有错误需阻断提交 - 不要依赖
form.checkValidity()—— 它只检查原生约束（如required、type="email"），对自定义规则无效
怎么让一个函数校验整个表单的所有字段
核心是遍历表单内需要校验的控件，逐个提取值、执行规则、收集错误。推荐用 form.elements 或 form.querySelectorAll('input, select, textarea') 获取全部可交互元素，再过滤掉 type="hidden"、disabled 或无校验需求的字段。
每个字段的校验逻辑建议解耦：用 data-validate 属性声明规则类型（如 data-validate="email|min:6|required"），再由主函数解析并分发到对应校验器，避免硬编码 if-else。
立即学习“前端免费学习笔记（深入）”；
- 注意
elements返回的是HTMLFormControlsCollection，不是数组，需用Array.from()或扩展运算符转成数组才能用filter/every - 空值判断别只用
=== ''，要兼顾null、undefined、全空格字符串，建议统一用String(value).trim() === '' - 对
checkbox和radio组，需按name聚合后判断是否至少一个被选中，不能单独看单个元素的checked
校验失败时如何统一标记错误并聚焦首个问题字段
视觉反馈和焦点引导直接影响用户体验。不要只弹 alert 或写死 console.log，而是操作 DOM：给出错字段添加 error 类（用于 CSS 样式）、插入提示文案、调用 element.focus()。
关键点在于「首个错误字段」的判定——不是 DOM 顺序第一个，而是校验循环中第一个返回 false 的字段。可用 some() 配合提前 return 实现，比 forEach 更适合中断流程。
- 添加 class 前先清除已有
error类，避免残留；可用element.classList.toggle('error', hasError) - 聚焦前检查
element.offsetParent !== null，防止因 display:none 或 tab-index=-1 导致 focus 失效 - 提示文案建议用
data-error-msg属性维护，比硬编码字符串更易维护多语言或动态内容
为什么把校验函数挂到 window 上不是好主意
所谓「全局校验函数」，指能在任意表单中复用，不是真要挂到 window.validateForm。挂到全局污染命名空间，且无法隔离不同表单的配置（比如一个要求密码强度，另一个不需要）。
正确做法是导出一个工厂函数，接收表单元素和配置对象，返回校验函数：const validate = createValidator(form, { rules: {...} })。这样每个表单持有一个独立实例，互不干扰。
如果必须跨模块调用，用 ES Module 导出 + 按需 import，或用 IIFE 封装，而不是依赖 window。
- 挂
window会导致压缩工具无法 tree-shake，增大包体积 - SSR 或微前端场景下，
window可能未定义，直接报Cannot set property 'validateForm' of undefined - 多个页面共用同一份 JS 时，后加载的页面可能覆盖先加载的
window.validateForm，引发隐蔽 bug
真正容易被忽略的是异步校验场景——比如用户名是否已存在，必须等接口返回后再决定是否放行提交。这时不能只靠同步返回布尔值，得改用 Promise，并在 submit 处理器里 await，否则会误判为通过。
