Jquery 密码强度检查代码改进

Question

我已经完成了这段代码的一部分，以根据其值更改进度条的颜色。关于密码强度，它从红色变为绿色。我认为有更好的方法来完成它。但是它工作得很好。有人可以检查一下，看看是否有更简洁的方法来实现它吗？

这里是 JavaScript 代码：

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 测试用代码：

<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 与：

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

使用一组正则表达式进行测试，并通过使用不区分大小写的标志和 \d 而不是 [0-9] 来清理它们。从那里，您可以通过遍历数组并测试每个数组来确定总强度。

不是为每种可能性分配 .value，而是将 strength 乘以 20。例如 2 * 20 结果是 40。

使用每个强度值对应的类数组。提前完全覆盖之前的类而不是试图找出以前的颜色。

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]);

Jquery 密码强度检查代码改进

Jquery password strength checker code improvment

html

javascript

css

passwords

jquery