基于规则评分的密码强度检测算法分析及实现-zxcvbn示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - 基于规则评分的密码强度检测算法分析及实现-zxcvbn示例</title>
</head>
<style>
    .container > * {
        width: 200px;
    }
    .bar {
        margin: 5px 0 3px;
        border: 2px solid #ccc;
        overflow: hidden;
    }
    .bar > span {
        display: block;
        height: 20px;
        width: 1%;
        background-color: green;
    }
</style>
<body>
<div class="container">
  <h1>请输入密码：</h1>
    <input id ="pwd" type="text" maxlength="32"  />
    <div class="bar">
        <span id="rate"></span>
    </div>
    <span id="score">0</span>
</div>
<script src="https://cdn.bootcss.com/zxcvbn/4.4.2/zxcvbn.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var pwd = document.getElementById("pwd");
        pwd.addEventListener("keyup",function () {
            var result = zxcvbn(pwd.value);
            document.getElementById("score").innerHTML = "评分："+result['score']*100.0 / 4;
            document.getElementById("rate").style.width = (result['score']*100.0 / 4)+"%";
        });
    });
</script>
</body>
</html>