Question

我设置了这个jquery脚本，以便在按下某个键时检查密码是否符合要求，但如果我将焦点设置在表单字段上然后保留（不输入任何内容），脚本仍会应用这些.addClass函数，而应该通过应用.removeClass（＆＃39; red-icon green-icon＆＃39;）恢复正常;来自选择器＃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

这一行：

if(password.length < 0) {

总是false，因为长度不能为负数。应该是：

if(password.length == 0) {

Answer 2

禁用你的提交按钮给它一个id ..（id =＆＃34;某事＆＃34;）然后使用此语句禁用 -

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

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

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

如果表单字段为空，则在blur（）之后将类更改回正常状态

2 个答案: