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

我已经完成了这段代码的一部分，来改变进度条的颜色。 密码强度从红色变为绿色。 我认为有一种更好的方法来完成它。然而，它工作得非常完美。 有没有人能检查一下，看看有没有更干净的方法来实现它

以下是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
        }
    }

---

使用正则表达式数组进行测试，并使用不区分大小写的标志和

\d

而不是

[0-9]

来清理它们。从那里，您可以通过迭代数组并测试每个数组来确定总强度

不要为每个可能性分配

值

，而是将

强度

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

const colors=[''‘红色’、‘橙色’、‘橙色’、‘黄色’、‘绿色’]；
常量模式=[
/[a-z\d][a-z\d]{2，}/i，
/[~?]+/,
/[!@£$%^&*()]+/,
/.{6}/,
/.{9}/,
];
const-strength=patterns.reduce（（计数，模式）=>count+pattern.test（密码），0）；
strengthBar.value=强度*20；
$（“#强度”）
.removeClass（颜色.连接（“”））
.addClass（颜色[强度]）；

您已经出色地清理了代码！它确实像一种魅力，谢谢。在下一篇文章中，我看到了一个在密码弱的情况下禁用提交按钮的功能。是否也有办法实现它？我尝试过添加一个css类，但效果不好。类似于

$（'.submit'）.prop（'disabled'，strength我想它只需稍加修改就可以完成这项工作。我尝试过，但如果在输入中没有输入任何内容，它会保持按钮处于激活状态。然后在第一个密码状态时，它被禁用，然后再次启用。我尝试添加“disable”到按钮并使用功能启用它，但不起作用。还尝试添加第二个条件。prop（'enabled'，strength>=1）但也不起作用。最后让它起作用。我不知道这是否是最干净的方式…我通过defaut向按钮添加了“disabled”。然后，我使用了
.prop（'enabled'，strength>=1）
.prop（“禁用”，力量是的，我会这么做，但我想你只需要一个，禁用的，对吗？
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);
}

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