javascript - 表单字段中的切换图标

Question

我正在处理一个登录屏幕，我需要在其中显示密码要求和匹配状态。目前，密码要求正在按需工作，但我遇到的问题是匹配的密码字段插件需要从灰色(空和默认)变为红色“X”(密码丢失或不匹配)或绿色“✔”(匹配密码)，就像密码要求状态一样。

这是工作 DEMO

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

<span id="matchpswstatus" class="input-group-addon"><i class="fa fa-times"></i></span>

这是 bootstrap 组的一部分，如下所示:

<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"><i class="fa fa-times"></i></span>
</div>

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

提前致谢!

Answer 1

使用与密码要求相同的方法，您可以执行如下操作:

var matchpswstatus = document.getElementById("matchpswstatus");
var divCheckPasswordMatch = document.getElementById("divCheckPasswordMatch");

$(function() {
  $("#matchpsw").keyup(function() {
    if ($("#psw").val() === $(this).val()) {
        divCheckPasswordMatch.textContent = "Passwords match.";
      matchpswstatus.classList.add("match");
      matchpswstatus.classList.remove("nomatch");
      matchpswstatus.textContent = "✔";
    } else {
        divCheckPasswordMatch.textContent = "Passwords do not match!";
      matchpswstatus.classList.add("nomatch");
      matchpswstatus.classList.remove("match");
      matchpswstatus.textContent = "✖";
    }
  });
});

添加了 CSS:

.match {
  color: green;
}
.nomatch {
  color: red;
}

但您可能还希望在更改第一个密码输入时进行更新。