JavaScript表单验证失效：点击提交跳过验证直接提交表单

你的表单跳过验证直接提交，核心原因是验证逻辑的绑定方式错误，同时还有几处代码细节错误，以下是具体修复步骤：

1. 错误的事件绑定逻辑 #

你在表单的onsubmit属性中调用validateForm()，但这个函数内部又给表单添加了一个新的submit事件监听器——这意味着第一次点击提交时，只是完成了监听器的绑定，并没有执行任何验证，表单直接提交；只有第二次点击提交时，才会触发监听器里的验证逻辑，这完全不符合预期。

正确的做法是：让validateForm直接作为验证函数，接收表单提交事件，执行验证并决定是否阻止提交。

2. 修正后的验证函数 #

替换原validateForm函数，直接在函数内完成验证逻辑，不需要再添加额外的事件监听器：

function validateForm(event) {
  event.preventDefault(); // 先默认阻止提交，验证通过后再取消阻止
  const dobInput = document.getElementById("dob").value;
  const state = document.getElementById("state").value;
  const postcode = document.getElementById("postcode").value;
  const otherSkillsCheckbox = document.getElementById("skillsOtherCheckbox");
  const otherSkillsText = document.getElementById("skillsOther").value;
  const errorMessages = document.getElementById("errorMessages");
  errorMessages.textContent = ""; // 清空之前的错误信息
  let isValid = true; // 标记验证是否通过

  // 出生日期验证
  const dobRegex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
  if (!dobRegex.test(dobInput)) {
    errorMessages.textContent += "出生日期格式无效，请使用dd/mm/yyyy格式。\n";
    isValid = false;
  } else {
    const [, day, month, year] = dobRegex.exec(dobInput);
    const dobDate = new Date(`${year}-${month}-${day}`);
    const currentDate = new Date();
    let age = currentDate.getFullYear() - dobDate.getFullYear();
    // 考虑生日未过的情况，更准确计算年龄
    const monthDiff = currentDate.getMonth() - dobDate.getMonth();
    if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < dobDate.getDate())) {
      age--;
    }
    if (age < 15 || age > 80) {
      errorMessages.textContent += "年龄必须在15到80岁之间。\n";
      isValid = false;
    }
  }

  // 州与邮编匹配验证
  const stateToPostcode = {
    VIC: ["3", "8"],
    NSW: ["1", "2"],
    QLD: ["4", "9"],
    NT: ["0"],
    WA: ["6"],
    SA: ["5"],
    TAS: ["7"],
    ACT: ["0"],
  };
  // 检查邮编首字符是否在对应州的允许列表中
  if (!stateToPostcode[state] || !stateToPostcode[state].includes(postcode.charAt(0))) {
    errorMessages.textContent += "邮编与所选州不匹配。\n";
    isValid = false;
  }

  // 其他技能文本框验证
  if (otherSkillsCheckbox.checked && otherSkillsText.trim() === "") {
    errorMessages.textContent += "请填写其他技能内容。\n";
    isValid = false;
  }

  // 验证通过则提交表单
  if (isValid) {
    event.target.submit();
  }
}

3. 修正HTML的onsubmit属性 #

修改表单的onsubmit属性，将事件对象传递给验证函数：

<form id="registrationForm" onsubmit="validateForm(event);">

4. 修复元素ID不匹配问题 #

原JS代码中使用的otherSkills和otherSkillsText，在HTML中对应的ID是skillsOtherCheckbox和skillsOther，已经在修正后的JS代码中调整，确保元素能正确获取。

5. 额外优化点 #

• 原年龄计算未考虑生日未过的情况，修正后计算更准确。
• 统一使用isValid变量标记验证状态，避免多次调用event.preventDefault()，逻辑更清晰。
• 原代码中stateToPostcode[state].test(postcode)错误，因为数组没有test方法，改为用includes检查邮编首字符。

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