缩短javascript RegExp条件

Question

我有一个在输入中的keyup上运行的以下javascript函数：

var passwordInput = document.getElementsByName("newPassword")[0].value;

var upperCase= new RegExp('[A-Z]');
var lowerCase= new RegExp('[a-z]');
var numbers = new RegExp('[0-9]');

if ( passwordInput.match(lowerCase) ) {
    $('.strength-check__rule[data-index="1"]').addClass('check-rule--pass');
} else {
    $('.strength-check__rule[data-index="1"]').removeClass('check-rule--pass');
}

if (passwordInput.match(upperCase)) {
    $('.strength-check__rule[data-index="2"]').addClass('check-rule--pass');
} else {
    $('.strength-check__rule[data-index="2"]').removeClass('check-rule--pass');
}

if(passwordInput.match(numbers)) {
    $('.strength-check__rule[data-index="3"]').addClass('check-rule--pass');
} else {
    $('.strength-check__rule[data-index="3"]').removeClass('check-rule--pass');
}

if(passwordInput.length >= 8) {
    $('.strength-check__rule[data-index="4"]').addClass('check-rule--pass');
} else {
    $('.strength-check__rule[data-index="4"]').removeClass('check-rule--pass');
}

每个条件内的addClasses只是向li添加一个类，以显示已满足该条件。 我想知道是否有人有任何关于如何缩短这个或使其更简洁的提示，特别是前三个非常相似的条件。

Answer 1

也许这可能有助于保存一些线条和字符：

var passwordInput = document.getElementsByName("newPassword")[0].value;

var upperCase= new RegExp('[A-Z]');
var lowerCase= new RegExp('[a-z]');
var numbers = new RegExp('[0-9]');

var x = [0,0,0,0];

x[0] = passwordInput.match(lowerCase) ? 1 : 0;
x[1] = passwordInput.match(upperCase) ? 1 : 0;
x[2] = passwordInput.match(numbers) ? 1 : 0;
x[3] = passwordInput.length > 7 ? 1 : 0;

for (var i = 0; i < 4; i++) {
    if (x[i] == 1) {
        $('.strength-check__rule[data-index="' + (i+1) + '"]').addClass('check-rule--pass');
    } else {
        $('.strength-check__rule[data-index="' + (i+1) + '"]').removeClass('check-rule--pass');
    }
}

Answer 2

怀疑它可以缩短远远超过这个：

var passwordInput = $('[name=newPassword]').val();
var tests = {
  1:/[a-z]/.test(passwordInput),
  2:/[A-Z]/.test(passwordInput),
  3:/[0-9]/.test(passwordInput),
  4:passwordInput.length >= 8
};
for(var i=1; i<=4; i++)
  $('.strength-check__rule[data-index=' +i+ ']')
  [ tests[i] ? 'addClass' : 'removeClass' ]('check-rule--pass');

Answer 3

根据你的脚本，我将它重构为不同的东西。 它可以被更好地考虑，但是你的想法是你有一个评估密码强度的功能，你可以操纵强度计。

<input type="text" name="newPassword" onkeyup="validate();">

<ul class="strength">
    <li class="strength-1">*</li>
    <li class="strength-2">*</li>
    <li class="strength-3">*</li>
    <li class="strength-4">*</li>
</ul>

<script type="text/javascript">

    $('ul.strength').css('list-style-type', 'none').find('li').css('float', 'left').hide();

    function getPasswordStrength(password) {
        var strength = 0;
        if(password.match(/[A-Z]/)) { strength++; }
        if(password.match(/[a-z]/)) { strength++; }
        if(password.match(/[0-9]/)) { strength++; }
        if(password.length > 8) { strength++; }
        return strength;
    }

    function validate() {
        var strength = getPasswordStrength(document.getElementsByName("newPassword")[0].value);

        $('ul.strength').find('li').hide();
        for(var  i = 1; i < strength + 1; i++) {
             $('li.strength-' + i).show();
        }
    }
</script>

Answer 4

我想你可以使用switch .attr()来改变类，例如：

 $("#pass").keyup(function(e) { var pass = $("#pass").val(); switch (true) { case /((?=.*[az])(?=.*[AZ])(?=.*[\\d])(?=.{8,})[^ ]*)/.test(pass): $("#stenght").attr("class", 'green'); break; case /((?=.*[az])(?=.*[AZ])(?=.*[\\d])[^ ]*)/.test(pass): $("#stenght").attr("class",'blue'); break; case /((?=.*[az])(?=.*[AZ])[^ ]*)/.test(pass): $("#stenght").attr("class", 'orange'); break; case /((?=.*[az])[^ ]*)/.test(pass): $("#stenght").attr("class",'red'); break; } }); 

 .red{color:red;} .orange{color:orange;} .blue{color:blue;} .green{color:green;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="pass" type="text"><br> <span class="red" id="stenght">PASSWORD STENGHT<span>