JavaScript表单验证失效：点击提交直接跳转PHP无弹窗提示

我尝试用JavaScript对注册表单做规则校验，但点击提交按钮时alert弹窗始终不弹出，页面直接跳转至PHP文件，无法定位问题。已经检查过分号、元素ID错误等问题，仍未解决。

原JavaScript代码 #

function validate() {
    var name = document.getElementById("name").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirm-password").value;
    var genderM = document.getElementById("gender-male").checked; //radio
    var genderF = document.getElementById("gender-female").checked; //radio
    var temperature = document.getElementById("temperature").checked; //checkbox
    var favourite = document.getElementById("favourite").checked; //select
    var email = document.getElementById("email").value;
    var errMsg = "";
    var result = true;

    if (name == "") {
        errMsg += "Please enter a name.\n";
    }
    
    if (username == "") {
        errMsg  += "Please enter a username.\n";
    }

    if (password == "") {
        errMsg += "Please enter a password.\n";
    }

    if (confirmPassword == "") {
        errMsg += "Please re-enter password.\n";
    }

    if (password != confirmPassword) {
        errMsg += "Confirm password does not match.\n";
    }

    if (email == "") {
        errMsg += "Please enter an email address.\n";
    }

    if (email.indexof('@') == 0) {
        errMsg += "Email address invalid.\n";
    }

    if (email.indexof('@') < 0) {
        errMsg += "Email address must contain an @ symbol.\n";
    }

    if ((genderM = "" )&&(genderF = "")) {
        errMsg += "Please enter a gender.\n";
    }

    if (temperature == "") {
        errMsg += "Please enter a drink temperature.\n";
    }

    if (favourite == "") {
        errMsg += "Please enter a favourite drink.\n";
    }

    if (errMsg != "") {
        alert (errMsg);
        result = false;
    }
    return result;
}

function init() {
    var register = document.getElementById("register"); //form id="register"
    register.onsubmit = validate;
}

window.onload = init();

问题分析与修复方案 #

• 错误1：window.onload绑定方式错误
  原代码中window.onload = init();会立即执行init函数，而非将函数绑定到页面加载完成事件上。如果DOM尚未加载完毕，document.getElementById("register")会返回null，导致后续的onsubmit事件绑定失败。
  修复：改为window.onload = init;（去掉括号，传递函数引用而非执行结果）。

• 错误2：字符串方法拼写错误
  indexof应为驼峰写法indexOf（字母O大写），拼写错误会导致JavaScript抛出异常，中断代码执行，后续的alert逻辑无法触发。
  修复：将所有email.indexof替换为email.indexOf。

• 错误3：性别校验逻辑错误
  原代码中(genderM = "" )&&(genderF = "")使用了赋值运算符=而非比较运算符==，而且genderM和genderF是布尔值（checked属性返回true/false），与空字符串比较逻辑错误。
  修复：改为!genderM && !genderF，判断两个单选按钮都未被选中。

• 错误4：复选框校验逻辑错误
  temperature == ""将布尔值与空字符串比较，逻辑不严谨。checked属性返回布尔值，直接判断是否未勾选即可。
  修复：改为!temperature。

• 错误5：下拉框取值错误
  下拉框元素没有checked属性，应该使用value属性获取选中项的值。原代码中var favourite = document.getElementById("favourite").checked;无法正确获取下拉框选项值。
  修复：改为var favourite = document.getElementById("favourite").value;。

修复后的完整代码 #

function validate() {
    var name = document.getElementById("name").value;
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var confirmPassword = document.getElementById("confirm-password").value;
    var genderM = document.getElementById("gender-male").checked;
    var genderF = document.getElementById("gender-female").checked;
    var temperature = document.getElementById("temperature").checked;
    var favourite = document.getElementById("favourite").value;
    var email = document.getElementById("email").value;
    var errMsg = "";
    var result = true;

    if (name === "") {
        errMsg += "Please enter a name.\n";
    }
    
    if (username === "") {
        errMsg += "Please enter a username.\n";
    }

    if (password === "") {
        errMsg += "Please enter a password.\n";
    }

    if (confirmPassword === "") {
        errMsg += "Please re-enter password.\n";
    }

    if (password !== confirmPassword) {
        errMsg += "Confirm password does not match.\n";
    }

    if (email === "") {
        errMsg += "Please enter an email address.\n";
    } else {
        if (email.indexOf('@') === 0) {
            errMsg += "Email address invalid.\n";
        }

        if (email.indexOf('@') < 0) {
            errMsg += "Email address must contain an @ symbol.\n";
        }
    }

    if (!genderM && !genderF) {
        errMsg += "Please select a gender.\n";
    }

    if (!temperature) {
        errMsg += "Please select a drink temperature.\n";
    }

    if (favourite === "") {
        errMsg += "Please select a favourite drink.\n";
    }

    if (errMsg !== "") {
        alert(errMsg);
        result = false;
    }
    return result;
}

function init() {
    var register = document.getElementById("register");
    register.onsubmit = validate;
}

window.onload = init;

内容的提问来源于stack exchange，提问作者Trung Kien Nguyen