应将表单校验逻辑绑定在 form 的 submit 事件上，而非按钮点击事件，以覆盖回车提交、辅助工具操作等所有提交路径；校验时需遍历字段做语义化判断，结合 html5 属性但不依赖，并通过 aria 属性和就地提示提升可访问性。
按钮点击后如何触发表单自检逻辑
直接在 button 上绑定 onclick 或用 addEventListener 监听点击，然后调用校验函数即可。但关键不是“怎么绑”，而是“绑在哪”和“校验时机是否合理”。多数人把校验写在 submit 事件里更稳妥，因为用户可能回车提交、或用辅助工具跳过按钮——仅靠按钮点击无法覆盖所有提交路径。
推荐做法：给 form 绑定 submit 事件，同时确保按钮的 type="submit"（而非 type="button"）。这样既响应点击，也兼容键盘提交、屏幕阅读器操作等场景。
-
type="submit"是默认值，显式写出更清晰，避免被重置为button - 在
submit回调中调用event.preventDefault()阻止默认提交，再执行自检 - 校验通过后再手动调用
form.submit()，否则表单不发请求
自检函数里该检查哪些字段
不能只看非空，得按字段语义做差异化判断。比如邮箱要 test() 正则，数字输入要 isNaN() + 范围检查，密码要两次输入比对。HTML5 原生属性（如 required、type="email"）能拦截部分错误，但不可依赖——它们只提供基础提示，且 Safari 对 setCustomValidity() 支持不稳定。
实操建议：
- 遍历
form.elements，跳过type="hidden"和禁用字段（disabled） - 对每个
input取.value.trim()再判断，避免空格干扰 - 邮箱用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/就够用，别套 RFC 复杂正则 - 密码确认字段需单独比对
password.value !== confirm.value，别只查非空
校验失败时怎么反馈给用户
弹 alert() 最简单，但体验差、阻塞操作、无障碍不友好。更合理的是就地标记：给出错字段加 class="error"，并在其旁插入 <span class="error-message"></span> 提示文本。注意不要覆盖原有 label，也不要只改颜色——色盲用户看不到红色边框。
关键细节：
- 每次校验前先清除所有
.error类和对应提示元素，避免残留 - 聚焦第一个出错字段：
input.focus()，但需防focus()在 iOS Safari 上失效（可加setTimeout延迟） - 用
aria-invalid="true"和aria-describedby关联提示元素，提升读屏支持 - 避免用
title属性显示提示——它延迟出现、不可选中、移动端难触发
为什么 submit 事件里校验比 onclick 更可靠
因为表单提交有多个入口：回车键、form.submit() 调用、甚至第三方脚本触发。如果只监听按钮 onclick，用户在邮箱输入框按回车时，校验逻辑根本不会执行——表单直接提交了。而 submit 事件是浏览器在“决定是否提交”前的最后钩子，无论触发源是什么，都会经过它。
容易忽略的点：
-
button[type="submit"]在某些旧版 Android WebView 中可能不触发submit事件，需额外监听click并手动dispatchEvent(new Event('submit')) - 若表单含
input[type="file"]，部分浏览器在未选文件时会跳过原生校验，需在 JS 中显式检查input.files.length - 动态添加的字段（如 JS 插入的
input）不会自动纳入form.elements，需手动收集或用querySelectorAll('input, select, textarea')
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
