如何为Bootstrap提交按钮添加页面跳转链接并保留数据验证？

要给Bootstrap的submit按钮添加跳转同时保留数据验证，有两种常用的实现方式，都是基于Bootstrap表单验证机制来做的：

方法一：利用表单的action属性（推荐，符合HTML语义） #

submit按钮的核心作用是提交表单，直接给表单设置action属性指定跳转的HTML文件，就能在表单验证通过后自动跳转。

完整代码示例：

<form class="needs-validation" novalidate action="target-page.html" method="get">
  <!-- 表单输入区域，需添加验证规则 -->
  <div class="mb-3">
    <label for="username" class="form-label">用户名</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">请输入用户名</div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password" required>
    <div class="invalid-feedback">请输入密码</div>
  </div>
  
  <!-- 原有的Submit按钮 -->
  <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
</form>

<!-- Bootstrap表单验证的核心JS -->
<script>
  (function () {
    'use strict'
    const forms = document.querySelectorAll('.needs-validation')
    
    Array.prototype.slice.call(forms).forEach(form => {
      form.addEventListener('submit', event => {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }
        form.classList.add('was-validated')
      }, false)
    })
  })()
</script>

• 原理：点击submit按钮后，JS会先检查表单是否通过验证，未通过则阻止提交并显示错误提示；验证通过则触发表单默认提交行为，跳转到action指定的target-page.html。
• 注意：表单要加needs-validation类，输入框要加required这类验证属性，配合invalid-feedback显示错误提示。

方法二：JavaScript手动控制跳转（灵活适配复杂场景） #

如果不想依赖表单的默认提交行为，可以把按钮改成type="button"，通过JS手动触发验证，验证通过后再跳转。

完整代码示例：

<form class="needs-validation" novalidate>
  <!-- 同样的表单输入区域 -->
  <div class="mb-3">
    <label for="username" class="form-label">用户名</label>
    <input type="text" class="form-control" id="username" required>
    <div class="invalid-feedback">请输入用户名</div>
  </div>
  <div class="mb-3">
    <label for="password" class="form-label">密码</label>
    <input type="password" class="form-control" id="password" required>
    <div class="invalid-feedback">请输入密码</div>
  </div>
  
  <!-- 把按钮类型改成button -->
  <button id="signInBtn" class="w-100 btn btn-lg btn-primary" type="button">Sign in</button>
</form>

<script>
  (function () {
    'use strict'
    const form = document.querySelector('.needs-validation')
    const signInBtn = document.getElementById('signInBtn')
    
    signInBtn.addEventListener('click', () => {
      if (form.checkValidity()) {
        // 验证通过，跳转目标页面
        window.location.href = 'target-page.html'
      } else {
        // 验证不通过，显示错误状态
        form.classList.add('was-validated')
      }
    })
  })()
</script>

• 原理：点击按钮后先调用form.checkValidity()验证表单，通过则用window.location.href跳转；未通过则添加was-validated类显示错误提示。
• 适用场景：需要在跳转前执行额外逻辑（比如请求接口验证账号）的情况。

内容的提问来源于stack exchange，提问作者LT APP