Question

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

这就是作业所要求的：网页应该有两个输入框，类型为=＆＃34;密码＆＃34;。用户需要在第一个输入框中输入新密码，然后在第二个输入框中再次输入密码。

当焦点离开第二个框时，脚本会检查以确保两个框的值相同而不是空（5个点）。注意：Internet上的很多示例都使用html文件中的html输入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 个答案: