表单字段中的切换图标

Question

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

这是工作 DEMO

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

<span id="matchpswstatus" class="input-group-addon"><i class="fa fa-times"></i></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"><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;
}

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