Raccourcir javascript RegExp Conditionnel

Question

J'ai la fonction javascript suivante qui s'exécute au moment de la frappe à l'intérieur d'une entrée :

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');
}

Les addClasses à l'intérieur de chaque condition ajoutent simplement une classe à une li pour montrer que cette condition a été remplie. Je me demande si quelqu'un a des conseils à me donner sur la façon de raccourcir ce texte ou de le rendre plus concis, en particulier les trois premières conditions qui sont très similaires.

Answer 1

Peut-être que cela pourrait aider à sauver quelques lignes et caractères :

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

Je doute qu'on puisse le raccourcir plus que ça :

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

Sur la base de votre script, je l'ai refactorisé en quelque chose de différent. Il peut être refactorisé encore mieux mais l'idée est que vous avez une fonction qui évalue la force du mot de passe et à partir de cette valeur, vous manipulez le compteur de force.

<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

Je suppose que vous pouvez utiliser un switch .attr() pour changer les classes, quelque chose comme :

$("#pass").keyup(function(e) {
var pass = $("#pass").val();
switch (true) {
  case /((?=.*[a-z])(?=.*[A-Z])(?=.*[\d])(?=.{8,})[^ ]*)/.test(pass):
    $("#stenght").attr("class", 'green');
    break;
  case /((?=.*[a-z])(?=.*[A-Z])(?=.*[\d])[^ ]*)/.test(pass): 
    $("#stenght").attr("class",'blue');
    break;
  case /((?=.*[a-z])(?=.*[A-Z])[^ ]*)/.test(pass):
    $("#stenght").attr("class", 'orange');
    break;
  case /((?=.*[a-z])[^ ]*)/.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>