本文介绍一种符合 Web 标准、无需 JavaScript 手动干预的表单重定向方案：利用 HTML5 表单原生验证 + action 属性实现条件通过后的自动跳转，并通过 invalid 事件统一处理校验失败提示。
本文介绍一种符合 web 标准、无需 javascript 手动干预的表单重定向方案：利用 html5 表单原生验证 + `action` 属性实现条件通过后的自动跳转，并通过 `invalid` 事件统一处理校验失败提示。
在 Web 开发中，表单提交后的页面跳转不应依赖于在 onsubmit 中调用 location.href 或 location.replace() —— 这类做法不仅容易因表单默认提交行为未被阻止而失效（导致页面刷新前跳转被中断），还违背了“语义化表单”与“渐进增强”的最佳实践。
正确的方式是将验证逻辑交由浏览器原生能力处理，并通过 <form></form> 的 action 属性声明目标 URL。当所有字段均满足 required、min、max 等约束时，表单才会真正提交，自然触发跳转：
<form name="form" action="otherpage.html" method="POST">
<p>
<label for="dLondon">Distance from London</label>
<input type="number" id="dLondon" name="dLondon"
min="3900" max="5200" title="London" required>
<label for="dLondon">miles</label>
</p>
<p>
<label for="dCanberra">Distance from Canberra</label>
<input type="number" id="dCanberra" name="dCanberra"
min="5500" max="6700" title="Canberra" required>
<label for="dCanberra">miles</label>
</p>
<p>
<label for="dOttawa">Distance from Ottawa</label>
<input type="number" id="dOttawa" name="dOttawa"
min="6700" max="9300" title="Ottawa" required>
<label for="dOttawa">miles</label>
</p>
<input type="submit" value="Submit">
</form>同时，为提升用户体验，可监听 invalid 事件（注意需捕获阶段 true）来自定义错误提示，避免浏览器默认丑陋的气泡提示：
document.forms.form.addEventListener('invalid', function(e) {
e.preventDefault();
alert(`${e.target.title} Distance isn't correct!`);
}, true);✅ 优势总结：
- ✅ 无需手动
event.preventDefault()干预提交流程； - ✅ 验证逻辑声明式写在 HTML 中，可维护性高；
- ✅ 兼容性良好（Chrome 10+、Firefox 4+、Edge 12+、Safari 10.1+）；
- ✅ 支持无障碍访问（屏幕阅读器能识别
required/min/max）； - ✅ 服务端仍可接收
POST数据（action指向真实处理页更佳）。
⚠️ 注意事项：
- 若需服务端校验兜底，请确保后端也校验相同业务规则，不可仅依赖前端；
-
action="otherpage.html"仅为示例，生产环境建议指向实际处理逻辑（如/api/submit或服务端路由），再由服务端重定向； - 不要混用
onsubmit="Distance();"和原生验证——二者冲突会导致行为不可预测。
遵循此模式，你将获得一个健壮、标准、易调试的表单跳转解决方案。
