如果变量为真，则JavaScript如何处理

Question

我不确定自己是否误解了Javascript中True/False的工作原理。

在我的Jquery脚本中，我将6个变量声明为false。如果正则表达式验证条件是合格的，则重新声明变量为true。底部是一个简单的alert()，告诉我所有变量都为true时。

验证条件正在起作用（移除/添加类），但是alert没有显示。这就是我不确定自己是否搞错了True / False部分的原因。

$('#password1').keyup(function() {
var checkLength = false;
var checkLetter = false;
var checkCaps = false;
var checkNum = false;
var checkSymbol = false;
var checkSpace = false;

var pswd = $(this).val();


//validate the length
if(pswd.length < 6 ){ 
 $('#length').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#length').removeClass('invalid').addClass('valid'); 
 checkLength = true; 
}

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}   

//validate no spaces
if(pswd.match(/\s/)){ 
 $('#spaces').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#spaces').removeClass('invalid').addClass('valid'); 
 checkSpace = true; 
}

// here is where I'm concerned I'm wrong
if(checkLength == true && checkLetter == true && checkCaps == true && checkNum == true && checkSymbol == true && checkSpace == true){ 
    alert("All good"); 
}

});

能有人给我复查一下吗？

- coffeemonitor

---

不要写 == true，这几乎总是多余的，即使不是，你的脚本也需要重构。 - user1479055

我猜你只是把一些条件搞错了。例如，如果密码包含从 a 到 z 的任何字母，你没有将 checkLetter 设置为 true。.match 如果不匹配则返回 null。 - Felix Kling

你可以尝试在正则表达式检查中使用test()而不是match()。Test会给你一个true/false的响应，而match()则返回一个数组。 - scrappedcola

@coffemonitor 我为你准备了一个可以工作的fiddle。 - Christoph

@coffemonitor - test的使用方法如下：/[A-Z]/.test(pswd)。这是一个正则表达式方法，它返回一个true/false值，而不是匹配项（您似乎不需要）。http://www.javascriptkit.com/javatutors/redev3.shtml - scrappedcola

Answer 1

起初，没有必要写 checkLength == true，checkLength 就足够了，因为它们都是布尔变量。

其次，在某些条件中，您分配类 invalid 但将变量设置为 true，而在其他条件中则反之。每个 check... = true 应该与 class = valid 在同一分支中。 此外，个人建议您调整有效性条件，使所有正面事件都在 if 或 else 分支中，而不是像当前这样混合。 最后，我总是尽量避免重复的代码。您可以进行很多重构，但可以从将类设置为单独的函数开始。

在此 fiddle 中查看其工作。

$('#password1').keyup(function() {
  var checkLength = false;
  var checkLetter = false;
  var checkCaps = false;
  var checkNum = false;
  var checkSymbol = false;
  var checkSpace = false;

  var pswd = $(this).val();


  //validate the length
  // reverse the condition, to have the valid state in the if branch as well
  if(pswd.length >= 6 ){ 
   setValid('#length'); 
   checkLength = true; 
  }else{ 
   setInvalid('#length');  
  }

  //validate letter
  if(pswd.match(/[A-Za-z]/)){
   setValid('#letter'); 
   checkLetter = true; 
  }else{ 
   setInvalid('#letter'); 
  }

  //validate capital letter
  if(pswd.match(/[A-Z]/)){ 
   setValid('#capital');
   checkCaps = true; 
  }else{ 
   setInvalid('#capital'); 
  }

  //validate number
  if(pswd.match(/\d/)){ 
   setValid('#number');
   checkNum = true;  
  }else{ 
   setInvalid('#number'); 
  }   

  //validate symbols
  if(pswd.match(/[^a-zA-Z0-9]/)){ 
   setValid('#symbol'); 
   checkSymbol = true; 
  }else{ 
   setInvalid('#symbol'); 
  }   

  //validate no spaces
  if(!pswd.match(/\s/)){
   setValid('#spaces'); 
   checkSpace = true;  
  }else{ 
   setInvalid('#spaces'); 
  }

  function setValid(e){$(e).removeClass('invalid').addClass('valid')} 
  function setInvalid(e){$(e).removeClass('valid').addClass('invalid')} 

  if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace){ 
  alert("All good"); 
  }
  console.log("keyup");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password1" type="text">

- Christoph

---

你最后编辑的那一点是不正确的。这个测试是针对符号，而不是字符串开头的字母数字字符。 - user1479055

Answer 2

所有这些地方都有错误的check* = true：

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}

在满足条件的情况下，请将语句插入跟随 if 块中（被视为有效），而不是放在 else 块中（被视为无效）：

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
 checkLetter = true; 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
 checkCaps = true; 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
 checkSymbol = true; 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
}

虽然有更好的编写验证代码的方法，但这是您片段的类似但更简洁的版本：

$("#password1").keyup(function() {
    var pswd = $(this).val();
    var checkLength = pswd.length >= 6;
    var checkLetter = /[A-Za-z]/.test(pswd);
    var checkCaps   = /[A-Z]/.test(pswd);
    var checkNum    = /\d/.test(pswd);
    var checkSymbol = /[^A-Za-z0-9]/.test(pswd);
    var checkSpace  = !/\s/.test(pswd);

    $("#length") .removeClass("valid invalid").addClass(checkLength ? "valid" : "invalid");
    $("#letter") .removeClass("valid invalid").addClass(checkLetter ? "valid" : "invalid");
    $("#capital").removeClass("valid invalid").addClass(checkCaps   ? "valid" : "invalid");
    $("#number") .removeClass("valid invalid").addClass(checkNum    ? "valid" : "invalid");
    $("#symbol") .removeClass("valid invalid").addClass(checkSymbol ? "valid" : "invalid");
    $("#spaces") .removeClass("valid invalid").addClass(checkSpace  ? "valid" : "invalid");

    if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace) {
        alert("All good");
    }
});

- user1479055

Answer 3

在我看来，你的任务似乎是有效的语句。它们是否按照你想要的方式设置是另一回事。

很可能是其中一个标志没有按照你想要的方式设置。为了检查这一点，你可以警告每个标志（checkCaps等），以确认每个值都按照你想要的方式设置。如果所有的true/false都是正确的，那么问题就在你最后的if语句中。

正如许多人建议的那样，删除== true是一个好主意。由于Javascript是动态类型的，有一种轻微的可能性，它不会将你的标志视为布尔值，而是视为其他东西。

如果删除== true不起作用，你可以检查不同的标志对，看哪一个使整个语句变为false。

- Brian J