Question

如果问题的措辞不是最好，那么最初道歉。这是JS的漫长的一天，这可能是我在这里的最后一天的问题。所以这里...... [/ p>

首先，我的代码：这是JS

function passwordValidation(){

    var uname = document.getElementById("username").value;
    var pword = document.getElementById("password").value;

    var userTB = document.getElementById("username");
    var passTB = document.getElementById("password");
    var userTBLength = userTB.length;
    var passTBLength = passTB.length;

    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";



    if (uname.length < 1){
        password.style.backgroundColor = noBg;
    }else if (username.value == password.value){
        match = "Match!";
        password.style.backgroundColor = matchCol;
    } else if  (username.value != password.value{
        match = "No Match!";
        password.style.backgroundColor = noMatchCol;
    }
    document.getElementById("combination").innerHTML = match;
}

这是我的HTML

<form>
Username: <input type="text" name="username" id="username" autocomplete="off" > <br><br>
Password:  <input type="text" name="password" id="password" onkeyup="passwordValidation()"> <br>
</form>

基本上它是一个密码验证表单，如果密码匹配，那么它打印出匹配，第二个字段变为绿色（这是有效的）。打印出不匹配，如果不匹配则打印为红色（这也有效）。

我的问题，以及它是一个顽固的问题，是关于何时两个字段都是空白的。即长度为0 这是不必要的，但我想实现它以完成一个成功的一天。最初当页面加载时，两个框都是空白或白色。当用户开始输入时，第二个框变为绿色或红色（这很棒）。问题是，当您从两个框中删除值时，它仍然保持绿色，显然＆＃34;空白＆＃34;匹配＆＃34;空白＆＃34;。

我想要的是，当他们一片空白时，他们总是有一个白色的背景，觉得我的功能应该达到那个......

Answer 1

这里的问题可能是您只调用密码框的方法onkyup，所以这一行：

if (uname.length < 1){
    password.style.backgroundColor = noBg;

不会被要求更改用户名。尝试将onkeyup="passwordValidation()"添加到用户名框中。

Answer 2

这应该可以解决您所看到的问题。

function passwordValidation(){


    var userTB = document.getElementById("username");
    var passTB = document.getElementById("password");
    var uname = userTB.value;
    var pword = passTB.value;
    var userTBLength = userTB.length;
    var passTBLength = passTB.length;

    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";

    if (uname.length < 1){
        password.style.backgroundColor = noBg;
    }else { // Needed this so the call to innerHTML below wouldn't fail
        if (username.value == password.value){
            match = "Match!";
            password.style.backgroundColor = matchCol;
        } else if  (username.value != password.value){ // There was a missing ')' here
            match = "No Match!";
            password.style.backgroundColor = noMatchCol;
        }
        document.getElementById("combination").innerHTML = match;
    }
}

Answer 3

如果您在有关匹配的陈述中插入了另一个条件，该怎么办？

例如：

if (uname.length < 1 || (username.value === password.value && uname.length < 1) ){
    password.style.backgroundColor = noBg;
}else if (username.value === password.value && uname.length > 1){
    match = "Match!";
    password.style.backgroundColor = matchCol;
} else if  (username.value !== password.value{
    match = "No Match!";
    password.style.backgroundColor = noMatchCol;
}

理解JavaScript如果语句与文本框长度相结合

3 个答案: