这些消息未正确显示在javascript的我的网页上。仅在两次单击文本框和从其中退出时，才会显示该消息。

Question

我编写了几个函数来检查两个密码是否相等。 我首先输入两个密码。 当我从“验证密码”框中单击时，它应该显示“密码匹配”或“由于两个密码不匹配，请再次输入密码”，具体取决于密码是否相等。 但是，当我输入两个相同的密码并单击“验证密码”文本框之外时，该消息不会第一次显示。 我必须在“验证密码”框中再单击一次，然后再单击一次以显示消息。 我希望在单击“验证密码”文本框后立即显示该消息，而不必再次单击并再次显示。 我在这里做错了什么？

我正在为此网页使用password.js文件和setpassword.html文件。

我的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);
};

我的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>&nbsp;</td>
      <td>
          <input type="reset" value="CLEAR" id="btnReset"></td>
    </tr>
    </table>
  </form>
 <script src = "password.js"></script>
</body>
</html>

Answer 1

第二次验证密码，因为仅在第一个onblur事件之后将eventListener添加到元素。 第一次工作时，请不要在onBlur函数中添加eventListener与。 请参考以下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);

这些消息未正确显示在javascript的我的网页上。仅在两次单击文本框和从其中退出时，才会显示该消息。

问题描述

1 个解决方案

解决方案1
0 2016-07-29 05:38:56

这些消息未正确显示在javascript的我的网页上。 仅在两次单击文本框和从其中退出时，才会显示该消息。

问题描述

1 个解决方案

解决方案1 0 2016-07-29 05:38:56

这些消息未正确显示在javascript的我的网页上。仅在两次单击文本框和从其中退出时，才会显示该消息。

解决方案1
0 2016-07-29 05:38:56