javascript - 为什么我的 JavaScript 代码没有按预期运行？

Question

与我编写的一些 JavaScript 相关的几个查询没有按照我认为应该的方式执行。这是一个密码验证表单，有 2 个输入字段，允许用户编写密码，然后重新输入以查看是否匹配

这是函数。

function passwordValidation(){


    var uname = document.getElementById("pword1").value;
    var pword = document.getElementById("cPassword").value;
    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";
    var passReq = new RegExp ("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\"\.\[\]_£|`¬':;~{}<>()#?!@$%^&*-]).{8,20}$");



    if (uname.length < 1 || pword.length < 1){
        cPassword.style.backgroundColor = noBg;
        match = "";
    }

    if(passReq.test(pword1)){
        DIMR = "Does Meet Requirements";
    }else {
        DIMR = "Does Not Meet Requirements";
    }

    if (uname == pword){
        match = "Match!";
        cPassword.style.backgroundColor = matchCol;
    } else{
        match = "No Match!";
        cPassword.style.backgroundColor = noMatchCol;
    }
    document.getElementById("combination").innerHTML = match;
    document.getElementById("reqMeeting").innerHTML = DIMR;
}

首先，为什么它忽略第一个 if 语句？当我在浏览器中加载代码并运行它时。当我在第一个输入框中输入值时，第二个输入框就会变成红色。即使 if 语句明确表示如果输入 a 或输入 b 为空，则不要执行此操作。

其次，.test 部分无法正常工作。也许我的代码是错误的，但对我来说，这就是说，如果正则表达式 passReq 与 pword1 值匹配，则打印出 “does/does not meet requests”。我还将其更改为变量名称 passReq.test(uname) 但仍然没有任何反应。

Answer 1

这是因为这是一个单独的 if 条件。因此，无论结果如何，它都会进入下一个条件。我想您必须将 else 部分与第一个 if 条件一起使用才能获得您想要的预期结果。

function passwordValidation() {
    var uname = document.getElementById("pword1").value;
    var pword = document.getElementById("cPassword").value;
    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";
    var passReq = new RegExp("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\"\.\[\]_£|`¬':;~{}<>()#?!@$%^&*-]).{8,20}$");
    if (uname.length < 1 || pword.length < 1) {
        cPassword.style.backgroundColor = noBg;
        match = "";
    } else {  // this should solve the problem
        if (passReq.test(pword)) {
            DIMR = "Does Meet Requirements";
        } else {
            DIMR = "Does Not Meet Requirements";
        }
        if (uname == pword) {
            match = "Match!";
            cPassword.style.backgroundColor = matchCol;
        } else {
            match = "No Match!";
            cPassword.style.backgroundColor = noMatchCol;
        }
        document.getElementById("combination").innerHTML = match;
        document.getElementById("reqMeeting").innerHTML = DIMR;
    }
}