パスワードの再入力の検証javascriptコードの訂正が必要

Question

両方のフィールドのデータ（パスワード）が等しいかどうかを確認するには、このコードを使用します。

最初のフィールドにパスワードを入力し、2番目のフィールドに移動してパスワードを再入力すると、その時点でエラークロス（fa-close）が表示されます。

代わりに、私が2番目のフィールドから抜け出した後、エラーメッセージが表示されます。

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

checkPass（）コールを2番目のパスワードのonblurに置き換えるか、2番目のパスワードが空であるかどうかを確認しないでください。

Answer 2

function checkPass() { 
 
\t 
 
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 = ""; \t 
 
} 
 

 
}

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

はどのようにあなたのために、このコードは動作しますか？ユーザが2番目のフィールドで何かをタイプしてから最初のフィールドに何かを入力した場合に対処するためにユーザがキーを解放するときはいつでもcheckValue()と呼ぶ（そうでないと、ユーザが同じフィールドに両方のフィールド）。その変更以外は、私はあまりやりませんでした。

編集：私は要素（confirmMessage）のIDとクラス属性の両方に同じ名前を使用することはありません、thisを参照してください。