這些消息未正確顯示在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