Question

我正在登录屏幕上，需要显示密码要求和匹配状态。目前，密码要求已根据需要工作，但是我遇到的问题是匹配的密码字段插件需要从灰色（空和默认）到红色的“ X”（缺少或不匹配的密码）或绿色的“ ✔”（匹配密码），就像密码要求状态一样。

这是正在工作的 DEMO

这种状态必须使用以下标记显示，因为它是Bootstrap输入组的一部分：

<span id="matchpswstatus" class="input-group-addon">✖</span>

这是引导程序组的一部分，例如：

<div class="input-group">
    <input type="password" id="matchpsw" name="matchpsw" class="form-control reenterpassword" placeholder="Re-enter Password" required />
    <span id="matchpswstatus" class="input-group-addon">✖</span>
</div>

如果用户重新输入不匹配的密码，灰色的“✖”变成红色，或者两个密码都匹配，变成绿色的“✔”，我将不胜感激。

提前谢谢！

Answer 1

我在检查值时添加了它：

$("#matchpswstatus").html(password == $(this).val() ? "&#10004;" : "&#10006");

if (password == $(this).val() ){
    $("#matchpswstatus").css("color", "green");
} else {
    $("#matchpswstatus").css("color", "red");
}

http://jsfiddle.net/hxz9oapc/

匹配密码验证

1 个答案: