javascript如果Variable(s)为True

Question

我不确定我是否误解了Javascript中的True/False是如何工作的.在我下面的Jquery脚本中,我将6个变量声明为false.如果正则表达式验证条件良好,那么我将变量重新声明为true.在底部是一个简单的alert()告诉我所有变量何时为真.

验证条件正在起作用(删除/添加类),但警报未显示.这就是为什么我不确定我是否搞乱了真假部分.

$('#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"); 
}

});

有人会仔细检查我吗？

Answer 1

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

其次,在某些条件下,您可以指定类invalid但将var设置为true,而在其他情况下则将其设置为true.每个人都check... = true应该在同一个分支中class = valid.另外,就个人而言,我会调整有效性条件,将所有积极事件都放在分支中if或else分支中,但不要像现在那样混合.最后,我总是尽量避免重复代码.有很多地方你可以重构,但你可以通过在一个单独的函数中设置类来轻松开始.

看到它在这个小提琴中工作.

$('#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">