为什么当我点击网页上的文本框时没有显示我的消息？答案

【问题标题】：Why are my messages not being displayed when I click out of the textbox on my webpage?为什么当我点击网页上的文本框时没有显示我的消息？
【发布时间】：2016-12-03 15:04:50
【问题描述】：

我写了几个函数来检查两个密码是否相等。当我点击“验证密码”框时，它应该显示“密码匹配”或“请重新输入您的密码，因为两个密码不匹配”取决于密码是否彼此相等。但是，当我输入两个相同或两个不同的密码并单击“验证密码”文本框时，根本不会显示该消息。我在这里做错了什么？

这是作业的要求：网页应该有两个 type="password" 的输入框。用户需要在第一个输入框中输入新密码，然后在第二个输入框中再次输入密码。

当焦点离开第二个框时，您的脚本会检查以确保两个框的值相同且不为空（5 分）。注意：网上很多例子都是使用html文件中的html input onchange属性来调用事件处理函数。不要使用任何类型的任何 html 属性来处理事件。相反，在您的 .js 文件中定义一个事件监听器（5 分）。

如果它们不相同，则显示一条消息，说明需要第二次尝试，并在第一个密码框中重置焦点。如果它们相同，请将之前的任何错误消息替换为说明密码匹配的消息。

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

我的 password.js 文件是：

var password1 = document.getElementById("txtPassword").value;
var verifypassword = document.getElementById("txtPWVerified").value;

var verifypasswordclick = document.getElementById("txtPWVerified");

function verifypassword1() {
    if(password1 == verifypassword && password1 != "" && verifypasword != "") {
        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() {
    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>

【问题讨论】：

标签： javascript html passwords

【解决方案1】：

而不是这个 verifypasswordclick.onblur = function() { verifypassword1;}

这样做 verifypasswordclick.onblur = verifypassword1;

【讨论】：

谢谢，这行得通。但即使我输入相同的两个密码，它仍然会显示“请再次输入您的密码，因为这两个密码不匹配”而不是“密码匹配”。你知道为什么吗？
@MichaelBao 你确定两个字符串相等（即使是大小写）？

【解决方案2】：

您没有正确调用verifypassword1 函数。你需要括号。但是，您可以尝试这一行，而不是从匿名函数中调用该函数。

verifypasswordclick.addEventListener("blur",verifypassword1);

此外，您每次都在比较初始值。每次检查密码时，您都需要从 input 元素中获取新值。在您的 verifypassword1 函数中，您需要像这样从那些 input 元素中获取新值。

function verifypassword1() {
    password1 = document.getElementById("txtPassword").value;
    verifypassword = document.getElementById("txtPWVerified").value;
    // rest of code
}

【讨论】：

如果我替换我的“verifypassword1;” verifypasswordclick.onblur = function() { 带有您建议的短语（即“verifypasswordclick.addEventListener("blur",verifypassword1);"），它仍然不会显示消息。
@MichaelBao 您必须在 verifypassword1 之后添加括号 () 否则在 onblur 处理程序执行期间将不会调用它。
我是说用那行代替verifypasswordclick.onblur = function() {verifypassword1;};，但是如果你想这样设置，你需要使用像verifypasswordclick.onblur = function() {verifypassword1();};这样的括号