如何实现表单验证通过后再显示加载器（Spinner）？

直接修改表单验证的提交事件处理逻辑，在验证通过时调用加载器函数即可，以下是合并后的完整代码：

(function() {
  'use strict'

  // 定义加载器显示函数
  function spinner() {
      document.getElementsByClassName("loader")[0].style.display = "block";
  }

  // 获取所有需要验证的表单
  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 {
          // 验证通过时启动加载器
          spinner();
        }

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

})()

关键改动说明 #

• 将spinner函数整合到自执行函数内部，确保作用域可访问
• 在表单提交事件中，增加else分支：当form.checkValidity()返回true（验证通过）时，调用spinner()显示加载器
• 保留原有的Bootstrap验证逻辑，仅新增加载器触发条件

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