表单提交前机器人校验异常：提交事件中IF语句失效求助

问题根源排查 #

你的代码里有几个关键问题直接导致校验逻辑无法正常运行：

1. 自执行函数未触发：JS代码最后只写了});，但自执行函数需要})();才能立即执行，导致整个校验逻辑根本没加载运行。
2. ID大小写不匹配：JS里用document.getElementById('nameFake')（驼峰大写F），但HTML里字段ID是namefake（全小写），DOM查询返回null，后续调用value会直接报错。
3. 重复ID问题：HTML里两个隐藏input的ID都是namefake，getElementById只能获取第一个匹配元素，第二个字段完全没被校验到。
4. 隐藏字段未真正隐藏：只给了ohnohoney类但没加CSS隐藏，机器人可能识别到，用户也能看到字段，失去了隐藏校验的意义。
5. 表单缺少提交按钮：当前HTML里没有提交按钮，根本触发不了submit事件。

修复后的完整代码 #

HTML部分（含提交按钮和隐藏CSS） #

<style>
/* 用绝对定位真正隐藏校验字段，避免被用户和普通机器人识别 */
.ohnohoney {
  position: absolute;
  left: -9999px;
  top: auto;
  height: 1px;
  width: 1px;
  overflow: hidden;
  tabindex: -1;
}
</style>

<form class="validity" name="webForm" id="webForm">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>

  <!-- 修正重复ID，每个字段用唯一标识 -->
  <label class="ohnohoney" for="namefake"></label>
  <input class="ohnohoney" autocomplete="off" type="text" id="namefake" name="namefake" placeholder="Your fake name here">
  <label class="ohnohoney" for="countryfake"></label>
  <input class="ohnohoney" autocomplete="off" type="text" id="countryfake" name="countryfake" placeholder="Your fake country here">
  
  <!-- 添加提交按钮触发submit事件 -->
  <button type="submit">提交</button>
</form>

JavaScript部分（修正执行逻辑、多字段校验） #

(function() {
  "use strict";
  window.addEventListener(
    "load",
    function() {
      var forms = document.getElementsByClassName("validity");
      document.body.style.backgroundColor = "green";

      // 用forEach遍历表单，比filter更直观（filter是用来筛选数组的）
      Array.prototype.forEach.call(forms, function(form) {
        form.addEventListener(
          "submit",
          function(event) {
            // 批量校验所有隐藏字段，只要有一个被填写就判定为机器人
            const hiddenFields = form.querySelectorAll('.ohnohoney[type="text"]');
            let isBot = false;
            
            hiddenFields.forEach(field => {
              if (field.value.trim().length > 0) {
                isBot = true;
              }
            });

            if (isBot) {
              event.preventDefault();
              document.body.style.backgroundColor = "purple";
            } else {
              document.body.style.backgroundColor = "orange";
              // 表单正常提交
            }
          },
          false
        );
      });
    },
    false
  );
})(); // 补上()触发自执行函数

额外优化建议 #

• 用querySelectorAll批量获取隐藏字段，彻底避免重复ID问题，同时能一次性校验多个防机器人字段。
• 隐藏字段的CSS用绝对定位移出可视区域，比display:none更稳妥——部分机器人会忽略display:none的字段，但不会忽略移出视口的字段。
• 给隐藏字段加tabindex="-1"，避免用户通过Tab键误聚焦到这些字段。

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