Jquery 密码强度检查器代码改进

Question

I've done a part of this code to change the color of the progress bar regarding it's value. It goes from red to green regarding the password strength. I think there is a way better methods to have it done. However it works perfectly. Can someone check it to see if there is a cleaner way to acheive it please?

Here is the JavaScript code:

var pass = document.getElementById("password")
    pass.addEventListener('keyup', function() {
        checkPassword(pass.value)
    })
    function checkPassword(password) {
        var strengthBar = document.getElementById("strength")
        var strength = 0;
        if (password.match(/[a-zA-Z0-9][a-zA-Z0-9]+/)) {
            strength += 1
        }
        if (password.match(/[~<>?]+/)) {
            strength += 1
        }
        if (password.match(/[!@£$%^&*()]+/)) {
            strength += 1
        }
        if (password.length > 5) {
            strength += 1
        }
        if (password.length > 8) {
            strength += 1
        }
        switch(strength) {
            case 0:
                strengthBar.value = 0
                $('#strength').removeClass('red')
                break
            case 1:
                strengthBar.value = 20
                $('#strength').addClass('red')
                $('#strength').removeClass("orange")
                break
            case 2:
                strengthBar.value = 40
                $('#strength').removeClass("red")
                $('#strength').addClass('orange')
                $('#strength').removeClass("yellow")
                break
            case 3:
                strengthBar.value = 60
                break
            case 4:
                strengthBar.value = 80
                $('#strength').removeClass("orange")
                $('#strength').addClass('yellow')
                $('#strength').removeClass("green")
                break
            case 5:
                strengthBar.value = 100
                $('#strength').removeClass("yellow")
                $('#strength').addClass('green')
                break
        }
    }

HTML code for testing purpose:

<h1>Progress</h1>
<label>Enter password</label>
<input style="width: 200px" type="text" autocomplete="none" id="password">
<progress id="strength" class="strength" value="0" max="100"> 32% </progress>

CSS that goes with:

progress.strength {
    -webkit-appearance: none;
    appearance: none;
}
progress.strength::-webkit-progress-value {
    background;
}
progress.red::-webkit-progress-value {
    background:red;
}
progress.orange::-webkit-progress-value {
    background:rgb(255, 153, 0);
}
progress.yellow::-webkit-progress-value {
    background:rgb(229, 255, 0);
}
progress.green::-webkit-progress-value {
    background:rgb(53, 252, 13);
}

Answer 1

Use an array of regular expressions to test against, and clean them up by using the case-insensitive flag and \d instead of [0-9] . From there, you can determine the total strenth by iterating over the array and testing each.

Instead of assigning the .value for each possibility, multiply the strength by 20. Eg 2 * 20 results in 40 .

Use an array of classes corresponding to each strength value. Overwrite the prior classes completely in advance instead of trying to figure out the previous color.

const colors = ['', 'red', 'orange', 'orange', 'yellow', 'green'];
const patterns = [
     /[a-z\d][a-z\d]{2,}/i,
     /[~<>?]+/,
     /[!@£$%^&*()]+/,
     /.{6}/,
     /.{9}/,
];
const strength = patterns.reduce((count, pattern) => count + pattern.test(password), 0);
strengthBar.value = strength * 20;
$('#strength')
  .removeClass(colors.join(' '))
  .addClass(colors[strength]);