javascript - JS/HTML onblur 仅运行一次

Question

我在大学作业中遇到了有关使用 JS 进行数据验证的问题。我已设置字段来触发 onblur 验证，除了我的用于确保密码和密码验证有效的代码之外，一切正常。一旦验证函数转到 !=，退出该字段后，onblur 似乎不会再次运行。

我已经在这里提取了代码。谁能告诉我我做错了什么？

function PVVal() {
  var pwTest = document.getElementsByName("password")[0].value;
  var pwVerify = document.getElementsByName("passwordVerify")[0].value;
  //trim whitespace
  pwTest = pwTest.trim();
  pwVerify = pwVerify.trim();
  if (pwTest != pwVerify) {
    document.getElementById("PVMsg").innerHTML = "<font color='red'>Passwords do not match</font>";
    PVCheck = 0;
  } else {
    document.getElementbyId("PVMsg").innerHTML = "";
    PVCheck = 1;
  }
}

<label for="Password">Password: <span id="PWMsg"></span>
            </label>
<input type="password" name="password" placeholder="Enter your Password" onblur="PWVal()" />

<label for="passwordVerify">Verify your Password: <span id="PVMsg"></span>
            </label>
<input type="password" name="passwordVerify" placeholder="Enter in your Password again" onBlur="PVVal()" />

Answer 1

我发现 PWVal、getElementById 和 onblur 的命名存在 4 个拼写错误。修复这些拼写错误后，该代码片段的工作原理如下所示。退出字段时验证正常工作。

此外，值得注意的是，以后遇到此类错误时，请先检查控制台。错误的函数名称将被调出，并让您沿着正确的路径进行故障排除。

function PWVal() {
  var pwTest = document.getElementsByName("password")[0].value;
  var pwVerify = document.getElementsByName("passwordVerify")[0].value;
  //trim whitespace
  pwTest = pwTest.trim();
  pwVerify = pwVerify.trim();
  if (pwTest != pwVerify) {
    document.getElementById("PVMsg").innerHTML = "<font color='red'>Passwords do not match</font>";
    PVCheck = 0;
  } else {
    document.getElementById("PVMsg").innerHTML = "";
    PVCheck = 1;
  }
}

<label for="Password">Password: <span id="PWMsg"></span>
            </label>
<input type="password" name="password" placeholder="Enter your Password" onblur="PWVal()" />

<label for="passwordVerify">Verify your Password: <span id="PVMsg"></span>
            </label>
<input type="password" name="passwordVerify" placeholder="Enter in your Password again" onblur="PWVal()" />