JavaScript绑定表单提交事件后alert弹窗多次弹出问题求助

问题根因 #

你遇到的重复弹窗问题90%以上是事件监听器重复绑定导致的：

• 你当前使用匿名函数作为事件回调，这段<script>代码每被执行一次，就会给BeforeFormSubmit事件新增一个监听函数
• 如果你的脚本被重复引入（比如单页应用页面切换未销毁旧监听、DOM重渲染后重复执行绑定逻辑、同一段代码被多次加载），表单提交时就会触发所有绑定的监听函数，每个符合条件的函数都会弹出alert，最终出现多个相同弹窗。

你当前代码里的多段appKey重复判断本身不会导致单个监听触发多次弹窗，因为每段判断触发alert前都会return false终止回调执行。

修复方案 #

1. 把匿名回调改成具名函数，绑定事件前先移除旧的监听，避免重复绑定
2. 优化冗余的重复校验逻辑，用循环实现更易维护
3. 把input的取值转成数字做比较，避免字符串比较出现逻辑错误

修复后完整代码 #

<script>
// 把回调逻辑抽成具名函数，方便后续移除监听
function checkFormQty(event) {
  const targetAppKey = 'xxxxxxxxxxxxxxxxxxx';
  if (event.detail.appKey !== targetAppKey) return;
  // 循环校验5个qty字段，不用写重复代码
  for (let i = 1; i <= 5; i++) {
    const input = document.querySelector(`input[id*='InsertRecordno_of_selections_qty${i}']`);
    // 转成数字再比较，避免字符串比较的异常，找不到元素时默认值为0
    const checkValue = Number(input?.value || 0);
    if (checkValue > 1) {
      event.preventDefault();
      alert(`There too many lines selected for Qty ${i}`);
      return false;
    }
  }
}

// 绑定前先移除旧的监听，避免重复绑定
document.removeEventListener('BeforeFormSubmit', checkFormQty);
document.addEventListener('BeforeFormSubmit', checkFormQty);
</script>

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