这些消息未正确显示在javascript的我的网页上。 仅在两次单击文本框和从其中退出时，才会显示该消息。
[英]The messages are not properly being displayed on my webpage in javascript. The message only displays after clicking in and out of the textbox twice.
问题描述
I wrote several functions to check if the two passwords are equal. 
我编写了几个函数来检查两个密码是否相等。 I first type two passwords. 我首先输入两个密码。 When I click out of the "verify password" box, it should either display "The passwords match" or "Please enter your password again because the two passwords don't match" depending on whether or not the passwords are equal to each other. 当我从“验证密码”框中单击时，它应该显示“密码匹配”或“由于两个密码不匹配，请再次输入密码”，具体取决于密码是否相等。 However, when I type in two identical passwords and I click out of the "verify password" text box, the message does not display the first time. 但是，当我输入两个相同的密码并单击“验证密码”文本框之外时，该消息不会第一次显示。 I have to click inside the "verify password" box one more time, and then click out of it for the message to display. 我必须在“验证密码”框中再单击一次，然后再单击一次以显示消息。 I want the message to display right after I click out of the "verify password" textbox, not having to click in and out again. 我希望在单击“验证密码”文本框后立即显示该消息，而不必再次单击并再次显示。 What am I doing wrong here? 我在这里做错了什么？
I am using a password.js file and a setpassword.html file for this webpage. 我正在为此网页使用password.js文件和setpassword.html文件。
My password.js file is: 我的password.js文件是：
var verifypasswordclick = document.getElementById("txtPWVerified");
function verifypassword1() {
var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
if(password1 == '' || verifypassword == '') {
return null;
}
if(password1 == verifypassword) {
alert('The passwords match');
}
else if(password1 !== verifypassword || password1 == "" || verifypasword == "") {
alert("Please enter your password again because the two passwords don't match");
}
}
verifypasswordclick.onblur = function() {
verifypasswordclick.addEventListener("blur",verifypassword1);
};
My setpassword.html file is: 我的setpassword.html文件是：
<!DOCTYPE html>
<!-- H5FormValidation.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Register Here</title>
</head>
<body>
<h2>Register Here</h2>
<form id="formTest" method="get" action="processData">
<table>
<tr>
<td><label for="txtEmail">Email<span class="required">*</span></label></td>
<td><input type="email" id="txtEmail" name="email" required></td>
</tr>
<tr>
<td><label for="txtPassword">Password<span class="required">*</span></label></td>
<td><input type="password" id="txtPassword" name="password" required></td>
</tr>
<tr>
<td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td>
<td><input type="password" id="txtPWVerified" name="pwVerified" required></td>
</tr>
<tr>
<td> </td>
<td>
<input type="reset" value="CLEAR" id="btnReset"></td>
</tr>
</table>
</form>
<script src = "password.js"></script>
</body>
</html>
1 个解决方案
解决方案1
0 2016-07-29 05:38:56
The password is verified second time because, the eventListener is added to the element only after the first onblur event. 第二次验证密码，因为仅在第一个onblur事件之后将eventListener添加到元素。 To work in first time don't add the eventListener with in the onBlur function. 第一次工作时，请不要在onBlur函数中添加eventListener与。 Refer the below js code. 请参考以下js代码。
var verifypasswordclick = document.getElementById("txtPWVerified");
function verifypassword1() {
var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;
if (password1 == verifypassword) {
alert('The passwords match');
}
else if (password1 !== verifypassword || password1 == "" || verifypasword == "") {
alert("Please enter your password again because the two passwords don't match");
}
}
verifypasswordclick.addEventListener("blur", verifypassword1);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.