输入为空时无法显示文本（客户端验证 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。那行不通的。输入字段只能设置值。我假设您正在尝试在输入字段下方设置标签的 html 或 div。将 id 更改为该元素的 id 即可。

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

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

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

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

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

if (!pass) { ... }

...测试密码是否不为空，因为除 '' 以外的任何值都将计算为真。

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

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

Having trouble displaying text when input is empty(Client side validation jQuery)

javascript

regex

validation

jquery

input