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;
}

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

表单字段中的切换图标

1 个答案: