JavaScript实现HTML表单验证时event.preventDefault()不生效求助

问题原因排查 #

• 错误1：脚本加载时机错误
  你把<script src="3.js">放在了head标签里，脚本执行时页面body还未渲染完成，document.getElementById("loginForm")会返回null，submit事件监听器根本没有绑定成功，验证逻辑完全没有执行，表单直接走默认提交跳转流程。
• 错误2：getElementById参数未加引号，触发JS运行报错
  你当前JS代码中这两行存在语法错误：

var emailError= document.getElementById(emailError);
var passError= document.getElementById(passError);

emailError和passError是目标元素的ID字符串值，未加引号时JS会将其识别为未定义的变量，直接抛出引用错误，后续的验证逻辑、event.preventDefault()代码都会终止执行。

• 可选优化：表单元素取值方式更稳妥
  用表单元素的name属性取值替代索引取值，避免后续调整表单元素顺序后索引对应错误。

解决方法 #

第一步：调整脚本加载逻辑 #

方案1：把head里的<script type="text/javascript" src="3.js"></script>移到</body>闭合标签之前，确保DOM渲染完成后再执行JS代码。
方案2：无需移动脚本位置，给script标签添加defer属性，让脚本自动等待DOM加载完成后执行：

<script type="text/javascript" src="3.js" defer></script>

第二步：修正JS代码中的ID参数错误 #

把获取错误提示元素的两行代码改为字符串参数：

var emailError= document.getElementById("emailError");
var passError= document.getElementById("passError");

优化后可直接运行的3.js参考代码 #

document.getElementById("loginForm").addEventListener("submit", loginFunction, false);

function loginFunction(event)
{
    var valid= true;
    var form = event.currentTarget;
    var email= form.elements['loginEmail'].value.trim();
    var pass= form.elements['loginPassword'].value.trim();

    var regexEmail= /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
    var regexPass= /^(\S*)?\d+(\S*)?\W+$/;

    var emailError= document.getElementById("emailError");
    var passError= document.getElementById("passError");
    // 先清空上次的错误提示
    emailError.innerHTML = '';
    passError.innerHTML = '';

    if (email === ""){
        emailError.innerHTML= "Email is empty";
        valid= false;
    }
    else if (!regexEmail.test(email)){
        emailError.innerHTML= "Incorrect Email format";
        valid= false;
    }

    if (pass === ""){
        passError.innerHTML= "Password is empty.";
        valid = false;
    }
    else if (pass.length < 8){
        passError.innerHTML= "Password is too short, must be 8+ characters";
        valid= false;
    }
    else if (!regexPass.test(pass)) {
        passError.innerHTML= "Incorrect password format";
        valid = false;
    }

    if (!valid){
        event.preventDefault();
    }
}

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