表单提交校验需在form元素监听submit事件并调用event.preventDefault()阻止默认行为，再执行必填、格式、一致性等自定义校验逻辑，通过后手动提交；可选HTML5原生校验但需注意兼容性与样式限制。
在表单提交时拦截并校验输入内容，核心是监听 submit 事件，调用 event.preventDefault() 阻止默认提交行为，再执行自定义校验逻辑。校验通过才允许真实提交（比如调用 form.submit() 或发起 AJAX）。
绑定 submit 事件并阻止默认提交
不要给提交按钮加 onclick，而应在 <form> 元素上监听 submit 事件。浏览器原生会在点击任何类型提交按钮（type="submit"）或回车时触发该事件，覆盖全面。
- 用
addEventListener('submit', handler)绑定，确保能拿到事件对象 - 第一行必须写
event.preventDefault()，否则页面会立即跳转或刷新 - 校验失败时，可聚焦首个错误字段、显示提示信息，提升用户体验
常见校验逻辑写法示例
校验通常检查必填、格式（邮箱/手机号）、长度、一致性（如两次输入密码）等。可封装成函数，提高复用性：
-
必填项：
input.value.trim() === '' -
邮箱格式：
/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(input.value) -
密码确认：比较两个
<input type="password">的值是否相等 - 校验后建议统一返回布尔值（
true表示通过），便于主逻辑判断
校验通过后手动提交
校验成功不等于自动提交——需显式处理：
立即学习“Java免费学习笔记（深入）”；
- 如果使用传统表单提交（非 AJAX），直接调用
form.submit() - 如果走 AJAX，用
fetch或XMLHttpRequest发送数据，成功后再跳转或清空表单 - 注意：不要在
submit事件里重复调用form.submit()，否则可能触发第二次submit事件，造成死循环
补充：利用 HTML5 原生校验（可选）
可以配合 required、type="email"、pattern 等属性，让浏览器自动提示基础错误。但要注意：
- 原生提示样式难定制，且部分老浏览器支持不全
- 仍需在 JS 中调用
form.checkValidity()主动检测，它返回布尔值 - 若想完全接管提示逻辑，可加
novalidate属性禁用原生校验
