BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑

Bootstrap是一款常用的前端开发框架，封装了很多常用的功能组件，如表单验证功能。但是在使用Bootstrap的表单验证组件时，我们可能会遭遇一些坑，其中比较典型的就是非Submit类型按钮点击时不能触发表单验证的问题。

下面是解决这个问题的攻略步骤：

步骤1：为非Submit类型按钮添加点击事件

首先，我们需要为非Submit类型按钮添加点击事件。在这个点击事件中，我们可以手动触发Bootstrap表单验证插件中的验证方法，以进行表单验证。

下面是一个简单的示例代码：

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="name-input">姓名</label>
    <input type="text" class="form-control" id="name-input" required>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
  <button type="button" class="btn btn-secondary validate-form-btn">验证</button>
</form>

在上面的代码中，我们在表单中添加了一个Submit类型按钮和一个非Submit类型按钮，其中后者的class为validate-form-btn。

接下来，我们将为validate-form-btn添加点击事件，并在该事件中手动触发表单验证插件的验证方法。代码如下：

$(document).on('click', '.validate-form-btn', function() {
  var form = $(this).closest('form');
  if (form[0].checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.addClass('was-validated');
});

在上面的代码中，我们使用了jQuery的事件代理机制，为document元素添加了一个click事件。当点击按钮时，我们首先通过closest方法找到最近的form元素，然后手动调用该元素的checkValidity方法进行表单验证。如果验证失败，则阻止表单提交，并防止事件继续传递，从而避免表单上的其他按钮（如Submit类型按钮）也被点击后提交。

最后，我们为form表单添加一个was-validated类，这个类是Bootstrap自带的，用于标记该表单已进行过验证。这样，即使该表单中的其他元素被修改，我们也可以在其触发blur事件时依然进行表单验证。

步骤2：修改表单元素的默认行为

接下来，我们还需要修改表单元素的默认行为，以便在非Submit类型按钮点击时也能够进行表单验证。我们可以在表单元素的HTML标签中添加一个onkeypress事件，以便在用户敲击回车键时自动触发表单验证。同时，我们还可以使用jQuery的trigger方法，手动触发表单元素的blur事件，以便在用户离开某个表单元素时自动进行表单验证。

具体的代码如下：

<form>
  <div class="row">
    <div class="col-md-6 mb-3">
      <label for="firstName">姓名</label>
      <input type="text" class="form-control" id="firstName" placeholder="" required onkeypress="if (event.keyCode === 13) { event.preventDefault(); validateForm(); }">
      <div class="invalid-feedback">
        请输入您的姓名。
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
  <button class="btn btn-secondary" type="button" onclick="validateForm()">验证</button>
</form>

<script>
  function validateForm() {
    $('#firstName').trigger('blur');
    $('form').addClass('was-validated');
  }
</script>

在上面的示例代码中，我们在输入框上使用了一个onkeypress事件，并在该事件中添加了一个判断语句：当触发回车键时，防止表单提交，并手动调用validateForm函数进行表单验证。

而在validateForm函数中，我们采用了jQuery的trigger方法，手动触发firstName输入框的blur事件，并同时为整个form表单添加了was-validated类，标记该表单已经进行了验证。

这样，在点击非Submit类型的验证按钮时，我们就可以通过手动触发表单验证方法和修改表单元素的默认行为来实现表单验证了。