HTML表单onsubmit返回false仍触发提交的问题如何解决

核心问题点 #

• 行间事件传参错误导致JS抛出异常，验证逻辑终止执行
  你的form标签中写的是onsubmit="return validation(e);"，行间事件上下文里不存在变量e，会直接抛出引用错误，后续的return false逻辑完全不会运行，浏览器就会走默认的表单提交逻辑跳转页面。
• 邮箱正则表达式写法错误
  你定义的var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;中，w应该是\w（匹配字母、数字、下划线），正则里的.需要转义为\.才会匹配普通点字符，否则会匹配任意字符，导致邮箱验证逻辑不符合预期。
• 输入取值没有过滤首尾空格，用户输入全空格可以绕过非空校验

修复步骤 #

步骤1：修改form标签的onsubmit属性 #

将原有的onsubmit="return validation(e);"修改为：

<form action="result.html" method="get" onsubmit="return validation(event);">

步骤2：修改validation函数，修复bug并增加兜底阻止逻辑 #

修改后的完整JS代码如下：

// 表单提交验证函数
function validation(e) {
    // 兜底阻止默认提交，避免任何异常情况下触发跳转
    e = e || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;

    // 取值时加trim过滤首尾空格
    var name = document.getElementById("name").value.trim();
    var email = document.getElementById("email").value.trim();
    var contact = document.getElementById("contact").value.trim();
    // 修复后的邮箱正则
    var emailReg = /^([\w-.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    
    // 验证逻辑
    if (name != '' && email != '' && contact != '') {
        if (emailReg.test(email)) {
            if (document.getElementById("male").checked || document.getElementById("female").checked) {
                // 补充判断手机号为纯数字
                if (contact.length == 10 && !isNaN(contact)) {
                    alert("所有验证已通过");
                    console.log("所有验证已通过");
                    // 验证通过后手动提交表单
                    e.target.submit();
                    return true;
                } 
                else {
                    alert("手机号必须为10位数字");
                    console.log("手机号必须为10位数字");
                    return false;
                }
            } 
            else {
                alert("请选择性别");
                return false;
            }
        } 
        else {
            alert("邮箱地址格式无效");
            return false;
        }
    } 
    else {
        alert("所有字段为必填项");
        return false;
    }
}

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