如果表单字段为空，则在blur（）之后将类恢复为正常

问题描述

我设置了这个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) ？

EDIT＃2：看来，即使不满足这些要求，它也允许我提交我的表格。 是否有禁用提交按钮的功能来防止这种情况？

要禁用您的提交按钮，请为其提供一个ID。（id =“ something”），然后使用此语句禁用-

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

并在需要时启用-

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