javascript - 验证重新输入密码 javascript 代码需要更正

Question

我有这段代码来验证两个字段上的数据(密码)是否相等。

当我在第一个字段中输入密码并转到第二个字段重新输入密码时，我当时收到错误十字(fa-close)。

相反，我需要在离开第二个字段后，然后收到错误消息。

HTML:

<input type="password" name="password" id="password" /><br>
<input type="password" name="password2" id="password2" onKeyUp="checkPass(); return false;" />
<span id="confirmMessage" class="confirmMessage"></span>

这是我的 JavaScript 代码:

<script type="text/javascript">
function checkPass() {
var pass1 = document.getElementById('password');
var pass2 = document.getElementById('password2');
var message = document.getElementById('confirmMessage');

var goodColor = "#fff";
var goodColored = "#087a08";
var badColor = "#fff";
var badColored = "#ed0b0b";

if(password.value == password2.value) {
  password2.style.backgroundColor = goodColor;
  message.style.color = goodColored;
  message.innerHTML = "<i class='fa fa-check'></i>"
}
else {
  password2.style.backgroundColor = badColor;
  message.style.color = badColored;
  message.innerHTML = "<i class='fa fa-close'></i>"
}
}  
</script>

帮助将不胜感激。谢谢。

Answer 1

function checkPass() {
	
var get_elem = document.getElementById,
pass1 = document.getElementById('password'),
pass2 = document.getElementById('password2'),
message = document.getElementById('confirmMessage'),
colors = {
goodColor: "#fff",
goodColored: "#087a08",
badColor: "#fff",
badColored:"#ed0b0b"
},
strings = {
"confirmMessage": ["good", "bad"]
};

if(password.value === password2.value && (password.value + password2.value) !== "") {
password2.style.backgroundColor = colors["goodColor"];
message.style.color = colors["goodColored"];
message.innerHTML = strings["confirmMessage"][0];
}
else if(!(password2.value === "")) {
password2.style.backgroundColor = colors["badColor"];
message.style.color = colors["badColored"];
message.innerHTML = strings["confirmMessage"][1];
}
else {
message.innerHTML = "";	
}

}  

<input type="password" name="password" id="password" onkeyup="checkPass()" /><br>
<input type="password" name="password2" id="password2" onkeyup="checkPass()" />
<span id="confirmMessage" class="confirmMessage"></span>

此代码对您有何作用？每当用户释放按键时，我们都会调用 checkValue() 来处理用户在第二个字段中输入内容然后在第一个字段中输入内容的情况(否则在这种情况下您将得到“bad”)即使用户在两个字段中输入相同的内容)。除了那个修改之外，我没有做太多事情。

编辑:我不会对元素的 id 和 class 属性使用相同的名称 (confirmMessage)，请参阅 this .