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