表單字段中的切換圖標

Question

我正在登錄屏幕上，需要顯示密碼要求和匹配狀態。 目前，密碼要求已根據需要工作，但是我遇到的問題是匹配的密碼字段插件需要從灰色（空和默認）到紅色的“ X”（缺少或不匹配的密碼）或綠色的“ ✔”（匹配密碼），就像密碼要求狀態一樣。

這是工作中的演示

由於它是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;
}

但是您也可能想在更改第一個密碼輸入時進行更新。