通过 javascript 拦截 submit 按钮的默认行为，在执行前端验证后手动跳转到目标 html 页面，既符合语义化 html 规范，又能确保数据校验不被绕过。
通过 javascript 拦截 submit 按钮的默认行为，在执行前端验证后手动跳转到目标 html 页面，既符合语义化 html 规范，又能确保数据校验不被绕过。
在 Web 开发中，常遇到这样的需求：使用 Bootstrap 的
✅ 正确做法是：监听表单的 submit 事件，在事件处理器中先调用 event.preventDefault() 阻止默认提交，再执行验证；验证通过后，使用 window.location.href 跳转：
<form id="loginForm">
<input type="email" name="email" required placeholder="邮箱">
<input type="password" name="password" required minlength="6" placeholder="密码">
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault(); // 阻止默认提交行为
// 执行自定义验证（也可复用浏览器原生 checkValidity()）
if (!this.checkValidity()) {
this.reportValidity(); // 显示原生验证提示
return;
}
// 验证通过，跳转到目标页
window.location.href = 'dashboard.html';
});
</script>? 关键要点：
- 必须绑定在 ，而非按钮的 click 事件——这样才能确保 required、type="email" 等原生验证自动触发；
- 使用 e.preventDefault() 是前提，否则表单会尝试提交（可能刷新页面或发送请求）；
- form.checkValidity() 返回布尔值，配合 form.reportValidity() 可统一触发浏览器标准提示样式；
- 若需额外验证（如密码确认、异步用户名检查），可在此处插入 Promise 或 fetch 逻辑，验证通过后再跳转。
⚠️ 注意事项：
- 不要滥用 type="submit" 实现纯导航：若表单无实际数据提交需求（如不涉及后端处理），更推荐使用 标签 + Bootstrap 按钮类（Sign in），语义更清晰、SEO 更友好、无需 JS 即可工作；
- 若后续需提交数据到服务器，应将跳转逻辑移至服务端响应后（如 fetch().then(() => window.location.href = ...)），避免客户端跳转导致数据丢失。
综上，以表单 submit 事件为入口、preventDefault + checkValidity + location.href 为组合方案，是在保留验证完整性与遵循 HTML 语义之间最稳健的实践方式。
