如何实现点击submit按钮后延迟2秒显示alert再完成form提交请求

核心逻辑是拦截表单的默认提交事件，延迟2秒后触发提示，再手动调用表单原生提交方法即可，完整可运行代码如下：

<form id="myForm" method="POST" novalidate="">
<input type="text" id="NameInput" name="NameInput">
<button type="submit">Complete</button>
</form>

<script>
const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();
  // 设置2秒延迟
  setTimeout(() => {
    alert('The form has been submited!');
    // 手动触发原生表单提交，不会重复触发submit事件监听
    myForm.submit();
  }, 2000);
})
</script>

如果需要保留浏览器自带的表单校验逻辑，可调整JavaScript部分如下：

const myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
  // 校验不通过时直接走默认逻辑，抛出浏览器自带的必填等提示
  if (!myForm.checkValidity()) return;
  e.preventDefault();
  setTimeout(() => {
    alert('The form has been submited!');
    myForm.submit();
  }, 2000);
})

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