我正在尝试使用 && 运算符，但它对我不起作用

Question

我的目标是创建一个表单，有人可以在其中插入用户名和密码，但如果其中一个值小于五位数字，则会显示一条警报，告诉他们其中一个或两个值都小于五位数字，我尝试过使用 && 逻辑运算符来解决此问题，但我需要它仅在插入两个值后才显示警报，而不是仅检查一个值并立即运行。我也使用传统的 DOM 事件处理程序来解决这个问题。我可能做错了什么？

<form style= "margin-top: 2rem;" id="form">
  <label for="username">Create A Username</label>
  <input type="text" id="username" onblur="Blur1()"/>
  <input type="password" id="password"/>
  <div id="feedback1"></div>
  <input type="submit" value="send"/>
</form>

function Blur1() {
  var msg = document.getElementById("username");
  var pswrd = document.getElementById("password");
  var feedbck = document.getElementById("feedback1");

  if (msg.value.length < 5 && pswrd.value.length < 5) {
    feedbck.textContent = "Please insert a username and/or password with at least 5 digits";
  } else {
    feedbck.textContent = "";
  }
}
document.getElementById("password").onblur = Blur1;

Answer 1

您需要使用|| (或) 运算符而不是 && (和)，因为您需要检查它们中的任何一个是否是 <5 chars.

正确的 JS 代码如下所示：

function Blur1() {
  var msg = document.getElementById("username");
  var pswrd = document.getElementById("password");
  var feedbck = document.getElementById("feedback1");

  if (msg.value.length < 5 || pswrd.value.length < 5) {
    feedbck.textContent = "Please insert a username and/or password with at least 5 digits";
  } else {
    feedbck.textContent = "";
  }
}
document.getElementById("password").onblur = Blur1;