Question

我希望“绿色”中的“密码匹配”红色中的“密码不匹配”

我正在尝试这些代码行，但没有发生。但主要问题是“密码匹配”和“密码匹配”。 “密码不匹配”即将到来。

<script type="text/javascript">

function checkPasswordMatch() {
var password = $("#txtNewPassword").val();
var confirmPassword = $("#txtConfirmPassword").val();

if (password == confirmPassword)
    $("#divCheckPasswordMatch").html("Password Matched");
else
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.");
}

$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
}); 
</script>

这是我的HTML代码

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword">
<br />
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();">
<div id="divCheckPasswordMatch2" style="color:red">
<div id="divCheckPasswordMatch" style="color:green">

Answer 1

html中的<div>需要关闭。您的浏览器不知道如何构建损坏的html，因此它可能会将您的html呈现为嵌套的<div>，如下所示：

<div id="divCheckPasswordMatch2" style="color:red">
   <div id="divCheckPasswordMatch" style="color:green">
   </div>
</div>

这意味着当您使用javascript行替换html时：

$("#divCheckPasswordMatch2").html("Passwords Don't Match.");

浏览器删除要放入字符串<div>的其他"Passwords Don't Match"。结果是：

<div id="divCheckPasswordMatch2" style="color:red">
   <!-- This other div is removed -->
   Passwords don't match
</div>

现在，任何替换#divCheckPasswordMatch上的文本的尝试都将失败，因为该元素不再存在。

以下是解决该问题的方法：添加结束标记

<div id="divCheckPasswordMatch2" style="color:red"></div>
<div id="divCheckPasswordMatch" style="color:green"></div>

通过添加结束标记，您告诉浏览器在哪里结束您的块，并且您告诉浏览器这些块彼此相邻并且彼此不包含。通过此更改，您现在可以自由地向两个div添加和删除文本，它将永远不会影响其他div。

现在，让我们把这个问题放得更远一点。

@ dman2306正确地指出您的代码将显示错误消息和写入的成功消息。让我们通过只使用一个div并更改类来解决这个问题。

使用以下内容：

//HTML5 does not require type tags on your script blocks
    function checkPasswordMatch() {
        var password = $("#txtNewPassword").val();
        var confirmPassword = $("#txtConfirmPassword").val();
        var div = $( "#messageBlock" );
    
        if (password == confirmPassword){
            $(div).removeClass( "bad_password" );
            if( password == "" && confirmPassword == "" ){
                /* 
                    We do not delete the div. 
                    We set the html content to 
                    an empty string. This way 
                    we can use the DIV again in the future */
                $(div).html(""); 
            }else{
                $(div).html("Password Matched");
            }
        }
        else
        {
            $(div).html("Passwords Don't Match.");
            $(div).addClass("bad_password");
        }
    }
    
    $(document).ready(function () {
        $("#txtConfirmPassword").keyup(checkPasswordMatch);
    });

#messageBlock { color: green; }
    #messageBlock.bad_password { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Example</h1>
<p>Please enter passwords to check the behavior of the message div</p>
<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword">
    <br />
    <input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();">
    <div id="messageBlock"><!-- this is where ALL messages appear, and the color is based on the class name --></div>

运行上面的代码，查看新代码的实例。

此代码具有以下好处：

通过使用单个消息div，您一次只显示一条消息。所有新消息都将替换上述消息。
颜色没有硬编码到元素中，因此您只需更改自己的css（现在位于<style>元素中）即可更改页面外观。
您的javascript变得更加简单，您只需要担心添加正确的消息，然后添加或删除单个类名。默认文本颜色为绿色，类名为bad_password，文本颜色变为红色。

您仍然可以对此设计进行一些改进，但我已根据您的提交提出建议，以便您可以作为编码人员进行成长和改进。保持良好的工作，很快你就会建造出令人惊奇的东西！

Answer 2

尝试类似下面的内容以获得持久的颜色：

if (password == confirmPassword)
    $("#divCheckPasswordMatch").html("Password Matched").css("color", "green");
else
    $("#divCheckPasswordMatch2").html("Passwords Don't Match.").css("color", "red");
}

Answer 3

如果我这样做，我只会为消息设置一个div，然后相应地设置它。如果输入新密码，我会清除该消息。

<style>
    .green {
        color: green;
    }
    .red {
        color: red;
    }
</style>

<script type="text/javascript">
    function checkPasswordMatch() {
        var password = $("#txtNewPassword").val();
        var confirmPassword = $("#txtConfirmPassword").val();

        if (password == confirmPassword) {
            $("#divCheckPasswordMatch").text("Password Matched");
            $("#divCheckPasswordMatch").css("color", "green");
        }
        else {
            $("#divCheckPasswordMatch").text("Passwords Don't Match");
            $("#divCheckPasswordMatch").css("color", "red");

        }
    }

    function clearMessage() {
        $("#divCheckPasswordMatch").text("");
    }

    $(document).ready(function () {
        $("#txtNewPassword").keyup(clearMessage);
        $("#txtConfirmPassword").keyup(checkPasswordMatch);
    }); 
</script>

<input type="password" class="form-control" placeholder="Password" required="required" name="txtNewPassword" id="txtNewPassword">
<br />
<input type="password" class="form-control" placeholder="Confirm Password" required="required" name="txtConfirmPassword" id="txtConfirmPassword" onChange="checkPasswordMatch();">
<div id="divCheckPasswordMatch"></div>

如何动态更改文本的颜色？

3 个答案: