本文介绍如何利用 HTML 原生表单验证与 action 属性实现安全、可靠的提交后重定向，避免因 JavaScript 阻止默认行为不当导致跳转失效的问题。
本文介绍如何利用 html 原生表单验证与 `action` 属性实现安全、可靠的提交后重定向，避免因 javascript 阻止默认行为不当导致跳转失效的问题。
在 Web 开发中，表单提交后的页面跳转看似简单，但若处理不当（如在 onsubmit 中执行 JS 逻辑却未显式阻止默认提交），极易导致跳转失败——正如示例中 location.href = "otherpage.html" 未生效：因为表单仍按原 <form method="POST"></form> 提交，触发了页面刷新或请求，覆盖了 JS 跳转指令。
根本原因在于：
-
onsubmit="Distance();"默认会继续提交表单（即发送 POST 请求），而 JS 中的location.href执行后，页面可能尚未跳转就被表单提交中断； - 即使添加
return false或event.preventDefault()，也需确保在所有分支（包括验证失败）中统一控制流程，易出错且可维护性差。
✅ 推荐方案：回归语义化 HTML 表单机制
利用浏览器原生验证能力（min/max/required）配合 <form action="otherpage.html"></form>，让验证与跳转解耦：
<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 事件精细化捕获验证失败并提示用户（注意使用 useCapture: true 确保在冒泡前拦截）：
document.forms.form.addEventListener('invalid', function(e) {
e.preventDefault();
alert(`${e.target.title} Distance isn't correct!`);
}, true);⚠️ 关键注意事项：
- 移除
onsubmit内联处理器和手动location.*跳转逻辑，交由action属性统一控制成功流向； -
min/max必须为数字类型（非字符串），否则验证无效； - 若需服务端处理数据，
otherpage.html应能接收 POST 数据（如由后端渲染或通过fetch+history.pushState实现无刷新跳转，但本例以简洁重定向为目标）； - 原生验证具有无障碍支持（ARIA）、国际化提示等优势，比纯 JS 验证更健壮。
此方案无需额外框架，兼容所有现代浏览器，代码更简洁、逻辑更清晰，是表单重定向的最佳实践。
