表单提交前动态跳转靠onsubmit拦截+条件判断最直接，需preventDefault()阻止默认行为，根据字段值分支跳转并设兜底路径；复用表单时应传入路由策略函数而非硬编码action；异步校验须await完成后再replace跳转，避免重复提交。
表单提交前怎么动态决定跳转到哪个页面
靠 onsubmit 拦截 + 条件判断最直接。别依赖后端重定向来“智能路由”，那已经晚了——用户点击瞬间就该知道去哪。
常见错误是把路由逻辑全塞进后端，结果表单校验失败还要多一次往返；或者用 window.location.href 硬跳，却忘了阻止默认提交，导致页面刷新两次。
- 在
<form></form>上绑定onsubmit="return handleRoute(event)"，函数里用event.preventDefault()拦住默认行为 - 根据表单字段值做分支：比如
document.getElementById('userType').value === 'admin'就跳/admin/dashboard，否则跳/user/profile - 注意字段为空或未选时的兜底路径，否则用户点提交没反应，会以为卡了
怎么让同一个表单在不同页面复用但路由不同
关键不是改表单结构，而是传入路由策略。把跳转逻辑抽成函数参数，比写死 action 属性靠谱得多。
典型翻车场景：复制粘贴同一份表单 HTML 到三个页面，每个都手动改 action，结果漏改一个，用户提交后 404。
立即学习“前端免费学习笔记（深入）”；
- 用
data-route-strategy自定义属性标记行为，比如data-route-strategy="signup"，JS 里查这个值再匹配预设规则 - 避免用
form.action动态赋值，IE 和部分旧浏览器对它的修改不触发 submit 事件重绑定 - 如果用框架（如 React/Vue），把路由决策函数作为 prop 传入表单组件，比用全局变量或 document.querySelector 更可控
表单里有异步校验（比如用户名是否可用）时怎么控制路由
必须等异步完成才能决定跳哪，不能先跳再校验。这时候 onsubmit 里不能直接 return true/false，得用 Promise 链或 async/await。
常见错误是校验发请求，但没 await 就直接跳转，导致校验还没返回，页面已经走了。
- 给提交按钮加 loading 状态，禁用它直到校验结束，防止重复点击
- 用
fetch或axios校验后，在.then()或await后再调用window.location.replace()（别用href，避免后退回到空白提交页） - 校验失败时，把错误信息写进
span.error元素，别只靠 alert，破坏体验
为什么用 replace() 而不是 assign() 或 href 跳转
防止用户点浏览器后退回到一个已提交过的表单页，再点提交就重复发请求。这是真实线上事故高频点。
有人图省事写 window.location.href = '/success'，结果用户后退看到空表单，刷新又提交一遍。
-
window.location.replace('/success')会替换当前历史记录项，后退直接回到上上页 -
window.location.assign()是新增一条历史，和href效果一样，不解决重复提交问题 - 如果需要保留某些状态（比如来源页参数），把它们拼进 replace 的 URL 里，别依赖 sessionStorage 传参，容易丢
表单路由真正的复杂点不在跳哪，而在于“什么时候跳”和“跳完用户还能不能退回来干傻事”。这两个时间点卡不准，智能就变智障。
