如何确认表单成功提交后触发加载函数，避免pattern校验不通过时误触发

这是事件触发顺序导致的问题：submit按钮的click事件触发优先级早于表单原生校验逻辑，只要点击按钮无论校验是否通过，绑定的点击事件都会执行。而表单的submit事件仅在pattern、required等原生校验规则全部通过后才会触发。

不要给按钮绑定click事件，改为将加载逻辑绑定到表单的submit事件上即可。
代码示例：

<!-- 表单结构 -->
<form id="dataForm">
  <input type="text" pattern="[0-9]+" placeholder="请输入数字" required>
  <button type="submit">提交拉取数据</button>
</form>

const form = document.querySelector('#dataForm')
// 绑定表单submit事件
form.addEventListener('submit', function(e) {
  // 走到这里说明原生校验已经全部通过，直接执行加载逻辑
  generateLoadingElement()
  // 如果是异步提交不跳转页面，保留下面这行阻止默认提交行为，同步提交可删除
  // e.preventDefault()
})

如果确实需要绑定按钮的click事件，可以手动调用表单的checkValidity()方法判断校验结果，校验通过后再执行加载逻辑：

const submitBtn = document.querySelector('#submitBtn')
const form = document.querySelector('#dataForm')

submitBtn.addEventListener('click', function() {
  // 手动触发表单校验，判断是否符合所有规则
  if (form.checkValidity()) {
    generateLoadingElement()
  }
})

如果是异步拉取数据，需要在请求完成（无论成功失败）后隐藏或移除加载元素，避免页面一直处于加载状态误导用户。

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