javascript - 卡在第二个 if 语句 javascript 中

Question

任何人都可以找出我的代码有什么问题吗？我想在第三个 if 语句中进行密码验证。但看来我只是坚持我的第二个 If 语句!我已经花了几个小时了..不知道出了什么问题!请帮忙!顺便说一句，我正在使用 onkeyup 事件。

function validateTextbox () {
    var user = document.getElementById("username"),
    pass = document.getElementById('password'),
    cpass = document.getElementById('cpassword'),
    message = document.getElementById('confirmMessage'),
    goodColor = "#66cc66",
    badColor = "#ff6666";

    //(first if statement) if its false its gonna output
    //Username must be 6 characters  if true its gonna
    //proceed to 2nd statement
    if (user.value.length >= 6) {
        //(2nd if statement) if its false its gonna output
        //password must be 8 characters  if true its gonna
        //proceed to 3rd statement
        if(pass.value.length >= 8){
            //And it does not validate password matched
            //I dont know what went wrong
            if (pass.value == cpass.value) {
                cpass.style.backgroundColor = badColor;
                message.style.color = goodColor;
                message.innerHTML = "Passwords match"
            } else {
                cpass.style.backgroundColor = goodColor;
                message.style.color = badColor;
                message.innerHTML = "Passwords does not match!"
            }
        } else {
            pass.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "Password must be 8 characters"
        }
    } else {
        user.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Username must be 6 characters"
    }
}

Answer 1

下面的代码示例完全符合您所解释的要求。将其复制并粘贴到新的 HTML 文件中，然后对其进行测试以查看您得到的结果。顺便说一下;无论如何，它与您自己的代码没有太大不同......

    <script>
        function validateTextbox(){
            var user        = document.getElementById("username");
            var pass        = document.getElementById('password');
            var cpass       = document.getElementById('cpassword');
            var message     = document.getElementById('confirmMessage');
            var goodColor   = "#66cc66";
            var badColor    = "#ff6666";

            //(first if statement) if its false its gonna output
            //Username must be 6 characters  if true its gonna
            //proceed to 2nd statement
            if(user.value.length >= 6){
                //(2nd if statement) if its false its gonna output
                //password must be 8 characters  if true its gonna
                //proceed to 3rd statement

                if(pass.value.length >= 8){
                    //And it does not validate password matched
                    //I dont know what went wrong
                    if(pass.value == cpass.value){
                        cpass.style.backgroundColor = badColor;
                        message.style.color         = goodColor;
                        message.innerHTML           = "Passwords match"
                    }else{
                        cpass.style.backgroundColor = goodColor;
                        message.style.color         = badColor;
                        message.innerHTML           = "Passwords does not match!"
                    }
                }else{
                    pass.style.backgroundColor      = badColor;
                    message.style.color             = badColor;
                    message.innerHTML               = "Password must be 8 characters"
                }
            }else{
                user.style.backgroundColor          = badColor;
                message.style.color                 = badColor;
                message.innerHTML                   = "Username must be 6 characters"
            }
            return false;
        }
    </script>


    <form method="post" onsubmit="return validateTextbox();">
        <div id="confirmMessage"></div>
        <input type="text"      id="username"   name="username" /> <br />
        <input type="password"  id="password"   name="password" /> <br />
        <input type="password"  id="cpassword"  name="cpassword" /> <br />
        <input type="submit" value="Register" />
    </form>

测试一下 HERE