输入为空时无法显示文本（客户端验证 jQuery）

Question

所以我在输入验证时遇到问题，或者我会说当输入为空时在输入下方显示某些文本时遇到问题。

正如您在代码中看到的那样，我尝试检查输入的值是否为 ''，但它现在可以正常工作了，我也尝试了其他方法，但是。如果有人向我展示我的初学者错误，我将非常感激。

$("#newPasswordTextBox").on("keyup", function() {
    let pass = $("#newPasswordTextBox").val();
    if (pass.length == '') {
      $("#newPasswordTextBox").html("Please enter your password");
    }
    if ((pass.length >= 10) && (pass.length < 15)) {
      var regex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[ `!#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~])/;

      if (!pass.match(regex)) {
        $("#newPasswordTextBox").css({
          "border-color": "red"
        })
      } else {
        $("#newPasswordTextBox").css({
          "border-color": "green"
        })
        $("#passwordCheck").html("Looks good");
        $("#passwordCheck").css({
          "color": "green"
        })
      }
    } else if (pass.length >= 15) {
      $("#newPasswordTextBox").css({
        "border-color": "green"
      })
    } else {
      $("#newPasswordTextBox").css({
        "border-color": "red"
      })
    }

    if (!this.pass) {
      $("#newPasswordTextBox").html("Please enter your password");
    }
  }

);

$("#confirmNewPasswordTextBox").on("keyup", function() {
  let pass = $("#confirmNewPasswordTextBox").val();
  let confpass = $("#newPasswordTextBox").val();

  if (pass === confpass) {
    $("#confirmNewPasswordTextBox").css({
      "border-color": "green"
    })
    $("#confirmPasswordCheck").html("Passwords are matching");
    $("#confirmPasswordCheck").css({
      "color": "green"
    })
  } else {
    $("#confirmNewPasswordTextBox").css({
      "border-color": "red"
    })
  }

  if (confpass.length == 0) {
    $("#confirmPasswordCheck").html("Please confirm your password");
    $("#confirmPasswordCheck").css({
      "color": "red"
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="newPasswordTextBox">New Password</label>
  <input type="password" id="newPasswordTextBox" class="form-control" name="password" placeholder="New Password" autocomplete="off">
  <span id="passwordCheck"></span>
</div>
<div class="form-group">
  <label for="confirmNewPasswordTextBox">Confirm Password</label>
  <input type="password" id="confirmNewPasswordTextBox" class="form-control" name="confirmNewPassword" placeholder="Confirm New Password" autocomplete="off">
  <span id="confirmPasswordCheck"></span>
</div>

Answer 1

看看这段代码：

if (!this.pass) {
  $("#newPasswordTextBox").html("Please enter your password");
}

您正在尝试设置密码输入字段的 html。那是行不通的。输入字段只能设置值。我假设您正在尝试在输入字段下方设置标签或 div 的 html。将 id 更改为该元素的 id 即可。

if (!this.pass) {
  $("#someDivOrLabel").html("Please enter your password");
}

请看这里：https://jsfiddle.net/efb0xc3z/

哦，我稍微修改了你的逻辑。您的原始代码正在测试：

if (pass.length == "") { ... }

这永远不会是真的，因为长度将是一个整数。您可以使用：

if (!pass) { ... }

...测试密码是否不为空，因为除 '' 之外的任何值都将评估为 true。

我还添加了一些 CSS 来移除输入字段上的焦点边框，因为这会掩盖轮廓颜色。