JS/HTML onblur 只运行一次答案

【问题标题】：JS/HTML onblur runs only onceJS/HTML onblur 只运行一次
【发布时间】：2019-09-26 14:58:16
【问题描述】：

我在大学作业中遇到了关于使用 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()" />

【问题讨论】：

你的函数是PVVal，但你在第一次输入时称它为PWVAL。 document.getElementbyId 必须是 document.getElementById。控制台输出是什么？
你的脚本中有两个错别字

标签： javascript html

【解决方案1】：

我发现PWVal、getElementById和onblur的命名有4个错别字。修正这些错别字后，sn-p 似乎可以正常工作，如下所示。退出字段时验证正常工作。

此外，值得注意的是，在将来遇到此类错误时，请先检查控制台。错误的函数名称将在那里被调用，并引导您找到正确的故障排除路径。

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()" />

【讨论】：

另外，<font> 已经不存在了
对不起，我应该指定调用 PWVal 的代码中不包含第二个函数，以检查密码输入的正确长度 onblur 密码输入。由于它运行正常，为简洁起见，我没有将其包括在内。
对于 j08691-我不是程序员/编码器/开发人员。该项目包括 HTML 和 CSS，我被告知不要编辑，除非有必要调用 JS 和函数。如果不使用我将如何更改该部分的默认文本颜色？
@PeterH 您可以使用带有内联样式的 span 标签，例如：stackoverflow.com/questions/19280303/…

【解决方案2】：

这是 PVMsg。我不知道为什么，但我更改了 span id="theMess" 并且一切都开始按预期工作。

感谢您的帮助。

【讨论】：