Bootstrap JS中表单校验通过后待运行的函数应在何处插入

插入自定义函数的位置说明 #

你需要在submit事件监听的逻辑里，判断表单验证通过的分支插入自定义处理逻辑，修改后的完整代码如下：

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict'

  // 获取所有要应用Bootstrap自定义验证样式的表单
  var forms = document.querySelectorAll('.needs-validation')

  // 遍历所有表单阻止默认提交行为
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          // 验证不通过时阻止提交和事件冒泡
          event.preventDefault()
          event.stopPropagation()
        } else {
          // ------------------------------
          // 此处插入所有字段验证通过后要执行的函数
          handleFormData()
          // 如果你要用AJAX异步提交（不刷新页面），请取消下一行的注释，阻止默认提交跳转
          // event.preventDefault()
          // ------------------------------
        }

        form.classList.add('was-validated')
      }, false)
    })

  // 自定义处理函数示例，你可以在这里写表单数据处理、提交请求等逻辑
  function handleFormData() {
    console.log('所有字段填写完成，开始处理表单数据')
  }
})()

补充注意事项 #

• 所有必填字段需要提前加上required属性，格式校验类字段可以配置type="email"、pattern等原生校验属性，form.checkValidity()才会正确识别字段有效性
• 如果你的表单不需要走浏览器默认的提交跳转逻辑，一定要在验证通过的分支里加上event.preventDefault()，避免页面自动刷新
• 该逻辑是Bootstrap官方原生的表单验证方案，自带适配Bootstrap的验证状态样式，不需要额外修改样式即可展示验证不通过的提示效果

内容的提问来源于stack exchange，提问作者Scott Harmon