在h5表单中拦截无效提交需监听form元素的submit事件并调用event.preventdefault()，再通过checkvalidity()/setcustomvalidity()或手动验证判断有效性，验证通过后可选择传统提交或ajax提交。
在 H5 表单中，拦截并阻止无效提交的核心是：**监听 submit 事件 + 调用 event.preventDefault() + 主动验证**。浏览器原生会在点击提交按钮或回车时触发 submit 事件，并在默认行为执行前给你干预机会。
监听 submit 事件并阻止默认行为
必须绑定在 <form></form> 元素上，而不是按钮或其他元素：
- 使用
addEventListener('submit', handler)或onsubmit属性 - 在回调函数第一行调用
event.preventDefault()，否则表单仍会跳转或刷新 - 注意：
form.submit()方法调用不会触发 submit 事件，所以它绕过了这个拦截逻辑
验证表单有效性（推荐两种方式）
方式一：用原生 checkValidity() + setCustomValidity()
- 调用
form.checkValidity()返回布尔值，自动触发各 input 的invalid事件和内置校验提示 - 对每个 input 可提前设置自定义错误信息：
input.setCustomValidity('邮箱格式不正确')；设为空字符串表示有效 - 验证失败时，
checkValidity()返回 false，且 focus 到首个无效字段（浏览器自动行为）
方式二：完全手动验证（适合禁用原生校验时）
- 给 form 加
novalidate属性，关闭浏览器默认气泡提示和自动拦截 - 在 submit 处理函数中遍历
form.elements，逐个检查规则（如正则、长度、必填等） - 手动添加错误样式（如
input.classList.add('error')）、显示提示文案、聚焦首个错误项
提交后的处理逻辑
验证通过后，有两条路径可选：
- 走传统表单提交：不调任何 JS，让浏览器按
action和method发起请求（页面会跳转/刷新） - 走 AJAX 提交：调用
fetch()或XMLHttpRequest发送数据，成功后手动清空或跳转，体验更平滑
若用 AJAX，记得在提交前禁用按钮防止重复点击，响应后恢复状态。
