表单提交前JavaScript验证需监听form的submit事件并调用event.preventDefault()阻止默认行为，再校验邮箱、手机号、必填项、密码强度等，失败时显示提示、高亮字段并聚焦，通过后可用form.submit()或AJAX提交。
在表单提交前用 JavaScript 验证输入格式，核心是监听表单的 submit 事件，调用 event.preventDefault() 阻止默认提交行为，再手动检查每个字段是否符合规则。验证通过才允许提交。
绑定 submit 事件并阻止默认提交
不要用按钮的 click 事件做主校验，应监听整个 form 元素的 submit 事件——这是最可靠、兼容性最好、且能捕获回车提交的方式。
- 给 form 添加 id（如
id="myForm"），便于获取 DOM - 用
form.addEventListener('submit', handler)绑定处理函数 - 第一行必须写
event.preventDefault()，否则页面会立即提交并刷新
常用格式验证方法
对不同字段类型，用对应逻辑判断：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
邮箱：用正则
/^[^\s@]+@[^\s@]+\.[^\s@]+$/粗略匹配，或更严格的 RFC 标准正则（生产环境建议用成熟库如 validator.js） -
手机号：国内可简单用
/^1[3-9]\d{9}$/，注意区分座机、国际号等场景 -
必填项：检查
input.value.trim() !== ''，避免只输空格 -
密码强度：组合验证长度、大小写字母、数字、特殊字符，例如
/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/
反馈错误信息并聚焦问题字段
验证失败时，不能只弹 alert，要提升用户体验：
立即学习“Java免费学习笔记（深入）”；
- 在对应 input 旁插入或显示提示文字（如
<span class="error">邮箱格式不正确</span>） - 给出错字段添加 CSS 类（如
input.invalid）高亮边框或背景 - 调用
input.focus()自动聚焦第一个错误项，方便用户修改 - 所有提示文字统一管理，避免多个 alert 干扰操作流
验证通过后手动提交
全部检查无误，可以用以下任一方式继续提交：
-
form.submit()：触发原生提交（不触发 submit 事件，适合“已确认合法”场景） -
fetch()或axios.post()发送 AJAX 请求：更现代，支持异步、上传进度、错误重试等 - 若用 AJAX，记得清空 loading 状态、禁用提交按钮防重复点击
