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

Question

I wrote several functions to check if the two passwords are equal. 我编写了几个函数来检查两个密码是否相等。 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 or two different passwords and I click out of the "verify password" text box, the message is not displayed at all. 但是，当我输入两个相同或两个不同的密码，然后单击“验证密码”文本框之外时，根本不会显示该消息。 What am I doing wrong here? 我在这里做错了什么？

This is what the assignment is asking: The webpage should have two input boxes of type="password". 这就是作业的要求：网页应具有两个类型为“密码”的输入框。 The user will need to enter a new password in the first input box, then type the password again in the second input box. 用户将需要在第一个输入框中输入新密码，然后在第二个输入框中再次键入密码。

When focus leaves the second box, your script checks to make sure the values of both boxes are the same and not empty (5 points). 当焦点离开第二个框时，脚本将检查以确保两个框的值相同且不为空（5分）。 Note: A lot of examples on the Internet use the html input onchange property in the html file to call the event handler. 注意：Internet上的许多示例都使用html文件中的html input onchange属性来调用事件处理程序。 Do not use any html property of of any type to handle events. 不要使用任何类型的html属性来处理事件。 Instead, define an event listener in your .js file (5 points). 而是在.js文件中定义一个事件侦听器（5分）。

If they're not the same, display a message saying that a second try is needed and reset the focus in the first password box. 如果它们不同，则显示一条消息，提示需要再次尝试，然后在第一个密码框中重置焦点。 If they are the same, replace any previous error messages with a message saying the passwords match. 如果它们是相同的，同一个消息，说的密码匹配替换任何先前的错误消息。

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 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;
};

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

Answer 1

You're not calling the verifypassword1 function correctly. 您没有正确调用verifypassword1函数。 You need parentheses. 您需要括号。 But instead of calling the function from within an anonymous function, you can try this line instead. 但是，您可以尝试使用此行，而不是从匿名函数中调用该函数。

verifypasswordclick.addEventListener("blur",verifypassword1);

Also, you're comparing the initial values every time. 另外，您每次都在比较初始值。 You need to get the new values from the input elements each time you check the passwords. 每次检查密码时，都需要从input元素中获取新值。 In your verifypassword1 function, you need to get the new value from those input elements like so. 在您的verifypassword1函数中，您需要像这样从这些input元素获取新值。

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

Answer 2

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

Do this verifypasswordclick.onblur = 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