如何在JavaScript中实现两种不同的密码验证提示弹窗？

你的代码存在两个关键问题导致无法实现需求：

• 使用||逻辑将两个错误条件合并，无法区分触发的是长度不足还是密码不匹配，因此只能弹出统一提示
• return false写在Event.preventDefault()之前，这行阻止默认行为的代码永远不会被执行

修正后的代码 #

function validatePassword(e){
    // 先阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    var pw = document.getElementById("txtPassword").value;
    var cpw = document.getElementById("txtCPassword").value;

    // 优先检查密码长度
    if(pw.length < 8){
        alert("密码至少需要8个字符");
        return false;
    }
    // 再检查两次密码是否匹配
    if(pw !== cpw){
        alert("密码不匹配");
        return false;
    }

    // 验证通过后可执行后续逻辑，比如表单提交
    return true;
}

正确绑定验证函数的方式 #

方式1：通过表单onsubmit属性绑定

<form id="passwordForm" onsubmit="return validatePassword(event)">
    <input type="password" id="txtPassword" placeholder="输入密码">
    <input type="password" id="txtCPassword" placeholder="确认密码">
    <button type="submit">提交</button>
</form>

方式2：使用addEventListener绑定（更推荐）

// 页面加载完成后绑定事件
window.onload = function(){
    document.getElementById("passwordForm").addEventListener("submit", validatePassword);
}

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