密码强度计量器等级展示及passwordScore函数实现技术咨询

我来帮你完善这个密码强度评分函数，同时实现对应的等级展示功能。先看修正并补全后的passwordScore函数，我会保留你原有的技术术语和代码结构，只补全缺失部分并修正小错误：

function passwordScore(password) {
    var score = 0;
    // 修正参数名不一致问题，原代码里用了pass但参数是password
    var pass = password;
    if (!pass) return score;

    // 统计字符出现频率并计算基础得分
    var letters = new Object();
    for (var i = 0; i < pass.length; i++) {
        letters[pass[i]] = (letters[pass[i]] || 0) + 1;
        score += 5.0 / letters[pass[i]];
    }

    // 检查密码包含的字符类型变体
    var variations = {
        Digitals: /\d/.test(pass),
        LowerCaseLetters: /[a-z]/.test(pass),
        UpperCaseLetters: /[A-Z]/.test(pass),
        NonSpaceWords: /\W/.test(pass),
    };
    var variationCount = 0;
    // 补全循环统计变体数量
    for (var key in variations) {
        if (variations[key]) {
            variationCount++;
        }
    }

    // 根据变体数量加分
    score += variationCount * 10;

    // 密码长度奖励：越长得分越高
    score += pass.length * 4;

    // 额外奖励：混合多种字符类型的额外加分
    if (variationCount > 2) {
        score += (pass.length - variationCount) * 2;
    }

    // 限制得分范围在0-100之间
    score = Math.min(Math.max(score, 0), 100);

    // 返回得分对应的等级和分数
    let level;
    if (score < 30) {
        level = "弱";
    } else if (score < 60) {
        level = "中";
    } else if (score < 85) {
        level = "强";
    } else {
        level = "极强";
    }

    return {
        score: Math.round(score),
        level: level
    };
}

代码说明： #

• 修正了原代码中参数名不一致的问题（原参数是password但内部用pass，已统一）
• 补全了变体类型的统计循环，统计包含的字符类型数量
• 增加了长度奖励分和多类型混合额外加分，让评分更贴合实际密码强度逻辑
• 限制得分在0-100区间，最后映射为4个强度等级：弱、中、强、极强

实现密码强度等级展示（前端示例） #

下面是一个简单的HTML+JS示例，实时展示输入密码的强度等级：

<div class="password-checker">
    <label for="password-input">输入密码：</label>
    <input type="password" id="password-input" placeholder="请输入密码">
    <div class="strength-indicator">
        <div class="strength-bar"></div>
        <p class="level-text">密码强度：无</p>
    </div>
</div>

<style>
    .strength-indicator {
        margin-top: 10px;
        width: 300px;
    }
    .strength-bar {
        height: 8px;
        border-radius: 4px;
        background-color: #eee;
        transition: background-color 0.3s, width 0.3s;
    }
    .level-text {
        margin: 5px 0 0 0;
        font-size: 14px;
    }
    /* 不同等级的样式 */
    .weak { background-color: #dc3545; }
    .medium { background-color: #ffc107; }
    .strong { background-color: #28a745; }
    .very-strong { background-color: #007bff; }
</style>

<script>
    const passwordInput = document.getElementById('password-input');
    const strengthBar = document.querySelector('.strength-bar');
    const levelText = document.querySelector('.level-text');

    passwordInput.addEventListener('input', function() {
        const result = passwordScore(this.value);
        // 更新文字提示
        levelText.textContent = `密码强度：${result.level}`;
        // 更新进度条样式
        strengthBar.className = 'strength-bar';
        switch(result.level) {
            case '弱':
                strengthBar.classList.add('weak');
                break;
            case '中':
                strengthBar.classList.add('medium');
                break;
            case '强':
                strengthBar.classList.add('strong');
                break;
            case '极强':
                strengthBar.classList.add('very-strong');
                break;
            default:
                // 空输入时重置
                levelText.textContent = '密码强度：无';
        }
        // 设置进度条宽度为得分百分比
        strengthBar.style.width = `${result.score}%`;
    });
</script>

这个示例会实时根据输入的密码更新强度条的颜色和宽度，同时显示对应的等级文字，用户体验更直观。

内容的提问来源于stack exchange，提问作者R.Enright