如何在保持表单验证的前提下，让提交按钮实现页面跳转？-html教程-PHP中文网

如何在保持表单验证的前提下，让提交按钮实现页面跳转？

本文介绍在不破坏 html 语义和前端验证逻辑的前提下，将 bootstrap 提交按钮改造为“带验证的页面跳转按钮”的三种专业方案：原生 javascript 拦截、jquery 事件绑定，以及更规范的表单 submit 事件处理方式，并附可直接运行的代码示例与关键注意事项。

本文介绍在不破坏 html 语义和前端验证逻辑的前提下，将 bootstrap 提交按钮改造为“带验证的页面跳转按钮”的三种专业方案：原生 javascript 拦截、jquery 事件绑定，以及更规范的表单 submit 事件处理方式，并附可直接运行的代码示例与关键注意事项。

在 Web 开发中，常遇到这样的需求：希望用户点击一个样式为

✅ 方案一：监听 submit 事件（推荐 · 最规范）

将按钮置于

内，通过 event.preventDefault() 阻止默认提交，手动校验后跳转：

✅ 方案二：使用 onclick + form.checkValidity()（轻量级）

若暂无包裹

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

，可为按钮添加 onclick 并显式调用验证 API：

<!-- 注意：需确保该按钮关联的输入框有 required 或其他约束属性 -->
<input type="email" id="email" required placeholder="Email" class="form-control mb-2"><input type="password" id="password" required placeholder="Password" class="form-control mb-3"><button class="w-100 btn btn-lg btn-primary" type="submit" onclick="handleSignIn()">Sign in</button>

<script>
function handleSignIn() {
  const form = document.createElement('form'); // 临时构造验证上下文
  const emailInput = document.getElementById('email');
  const pwdInput = document.getElementById('password');

  // 手动检查各字段有效性（或使用更健壮的验证库）
  if (!emailInput.checkValidity() || !pwdInput.checkValidity()) {
    emailInput.reportValidity();
    pwdInput.reportValidity();
    return;
  }

  window.location.href = 'dashboard.html';
}
</script>