javascript - 如果表单字段为空，则在 blur() 之后将类更改回正常

Question

我设置了这个 jquery 脚本，这样当按下一个键时，它会检查密码是否符合要求，但是如果我将焦点放在表单字段上然后离开它(不输入任何内容)，脚本仍然会应用那些.addClass 函数，相反，它应该通过应用 .removeClass('red-icon green-icon'); 恢复正常。来自选择器#rule1、#rule2、#rule3。我该如何解决这个问题？

  $(document).ready(function() {
        // Password length check
        $("#password").keyup(checkPassword);
        $("#password").blur(checkPassword);

  });

  function checkPassword() {
        var password = $("#password").val();


        //check if field not empty
        if(password.length < 0) {
              $("#rule1, #rule2, #rule3").removeClass('red-icon green-icon');
        } else {

              // validate number
              if(password.match(/[0-9]/)) {
                    $("#rule3").removeClass('fa-close red-icon');
                    $("#rule3").addClass('fa-check green-icon');
              } else {
                    $("#rule3").removeClass('fa-check green-icon');
                    $("#rule3").addClass('fa-close red-icon');
              }

              //validate capital letter
              if(password.match(/[A-Z]/)) {
                    $("#rule1").removeClass('fa-close red-icon');
                    $("#rule1").addClass('fa-check green-icon');
              } else {
                    $("#rule1").removeClass('fa-check green-icon');
                    $("#rule1").addClass('fa-close red-icon');
              }

              //validate password length
              if(password.length >= 8) {
                    $("#rule2").removeClass('fa-close red-icon');
                    $("#rule2").addClass('fa-check green-icon');
              } else {
                    $("#rule2").removeClass('fa-check green-icon');
                    $("#rule2").addClass('fa-close red-icon');
              }
        }
  }

编辑:

好的，我现在改变了脚本的方式，所以现在如果在模糊时它检测到该字段为空，它将像这样更改选择器#rule4 的类:

  // check if field is not blank
              if(password.length === 0) {
                    $("#rule4").removeClass('fa-check green-icon');
                    $("#rule4").addClass('fa-close red-icon');
              } else {
                    $("#rule4").removeClass('fa-close red-icon');
                    $("#rule4").addClass('fa-check green-icon');
              }

但它也会触发其他条件。如何让它只触发条件 if(password.length === 0) ？

编辑#2:即使不满足这些要求，它似乎也允许我提交我的表格。是否有禁用提交按钮的功能来防止这种情况发生？

Answer 1

禁用你的提交按钮给它一个id.. (id="something")然后使用此语句禁用-

$("#something").disable();  

这可以在任何需要的地方启用-

$("#something").enable();