Javascript 在表单字段中切换图标

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

这是正在工作的

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

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

如果您能帮我弄到灰色的，我将不胜感激。”✖“在用户重新输入不匹配的密码时变为红色或变为绿色”✔“以防两个密码都匹配

---

提前感谢！

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

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

---

但是，当第一个密码输入被更改时，您可能还需要进行更新。

好吧，要让它从X变为检查，您只需将

fa时间

换成

fa检查

。然后，就颜色而言，css可以完成。您混淆了哪一部分？如果密码不匹配？（或者可能？）我喜欢你的建议Rachel。我对下面的代码做了一些小修改：我们如何使用上面的JSFIDLE禁用提交按钮，直到密码匹配？谢谢。@Marcelomatins我现在只看到你对评论的回复（只是因为我浏览了过去的问题）…请在将来使用“@”符号标记用户，这样消息将进入收件箱通知。顺便说一句，我知道您已解决了css问题，但您仍然可以使用disabled属性禁用按钮。请查看此问题的答案（vanilla js和jquery都涉及此问题）：太棒了！如果您愿意查看的话，我对您的代码做了一些修改。谢谢您的帮助！是的，看起来您已经找到了。很高兴为您提供帮助。