必须监听form submit事件并同步调用e.preventdefault()，否则回车提交、js调用form.submit()等原生提交流无法拦截，导致页面刷新或路由跳转；按钮click或onsubmit内联写法无法覆盖所有提交触发方式，且破坏框架响应式更新与事件委托。
必须监听 form 元素的 submit 事件，并在回调第一行同步调用 e.preventDefault()，否则单页路由跳转或 API 提交前的数据校验会失效。
为什么只绑按钮 click 或用内联 onsubmit 会失败
单页应用中，表单提交常触发页面刷新或意外路由跳转，根本原因是验证逻辑没真正拦截住浏览器原生提交流。用户按回车、点击 <button type="submit"></button>、甚至 JS 调用 form.submit()，最终都派发 submit 事件——但不会都触发按钮的 click；而 onsubmit="return false" 会中断事件流，导致 Vue/React 的响应式更新未完成就提交，或框架的事件委托失效。
- 常见错误现象：
router.push()或history.replaceState()执行后页面白屏，控制台无报错，实际是表单已刷新 - 动态渲染的表单（如 Tab 切换后插入）若没重绑
submit监听器，新表单完全不走 JS 验证 - 使用
formnovalidate按钮时，若未在submit回调里判断e.submitter?.hasAttribute('formnovalidate')，会导致草稿保存也触发校验
同步验证必须覆盖所有字段类型
单页应用里字段可能混用原生 input、自定义组件（如日期选择器、富文本框），form.elements 可能读不到值，直接取 .value 易得空字符串或 undefined。验证不能只依赖正则和长度，还得适配不同控件的数据出口。
-
type="checkbox"和type="radio"要检查checked状态，而非value - 富文本编辑器需调用其 API（如
editor.getContent()）获取 HTML 或纯文本，再做 trim 和长度判断 - 日期选择器（如 flatpickr）的值通常存在
input._flatpickr.selectedDates[0]或绑定的 data 属性里，不能直接读input.value - 多选
<select multiple></select>要遍历selectedOptions，用Array.from(select.selectedOptions).map(o => o.value)
preventDefault 后如何安全发起 AJAX 提交
阻止默认行为后，手动 fetch 或 axios 提交前，必须确保数据已从视图同步到 JS 状态——尤其在 React/Vue 中，表单字段可能是受控组件，DOM 值和 state 不一致。
- React 场景下，优先用
useState或useRef维护字段值，避免直接读 DOM；若必须读，确保在useEffect或事件回调中取最新 state - Vue 场景下，
v-model绑定的字段要等nextTick再取值，否则可能拿到旧值 - 提交失败时，别直接
form.reset()：它会清空所有字段（包括未填项），应只重置错误提示和 loading 状态 - 成功后手动清理字段，需区分场景：登录表单清空密码框但保留用户名；地址表单可清空但保留收货人姓名
容易被忽略的兼容性与边界点
单页应用生命周期长，表单可能跨路由复用，submit 监听器若没清理，会在下次进入时重复绑定；而移动端软键盘收起后焦点丢失，验证失败时 input.focus() 可能无效。
- 监听器必须在组件卸载或路由离开时移除，例如 React 的
useEffectcleanup 函数里调用form.removeEventListener('submit', handler) - 移动端聚焦失败时，改用
input.scrollIntoView({ behavior: 'smooth', block: 'center' })辅助定位 - SSR 渲染的页面，脚本执行前用户可能已输入内容，需在
DOMContentLoaded后立即校验form.checkValidity()并补提示 - 无障碍访问下，
alert()会打断屏幕阅读器流程，错误提示应写入aria-live="polite"区域并设role="alert"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
