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

Question

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

这就是作业的要求：网页应具有两个类型为“密码”的输入框。 用户将需要在第一个输入框中输入新密码，然后在第二个输入框中再次键入密码。

当焦点离开第二个框时，脚本将检查以确保两个框的值相同且不为空（5分）。 注意：Internet上的许多示例都使用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>

Answer 1

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

verifypasswordclick.addEventListener("blur",verifypassword1);

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

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

Answer 2

代替此verifypasswordclick.onblur = function() { verifypassword1;}

这样做verifypasswordclick.onblur = verifypassword1;

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

问题描述

2 个解决方案

解决方案1
0 2016-07-29 02:32:50

解决方案2
0 2016-07-29 02:34:41

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

问题描述

2 个解决方案

解决方案1 0 2016-07-29 02:32:50

解决方案2 0 2016-07-29 02:34:41

解决方案1
0 2016-07-29 02:32:50

解决方案2
0 2016-07-29 02:34:41