bootstrap+linear-gradient制作密码强度提示

使用bootstrap和linear-gradient渐变色的效果制作提示密码强度的案例，判断密码强度主要使用了开源的公认的算法——zxcvbn。zxcvbn 是 dropbox 开发的一个JavaScript密码强度估算库。使用jQuery监听用户输入，每次和自定义的强度做判断，根据算法得出的结果修改渐变色的效果，并且修改模板的文案。

使用方法

在HTML中引入bootstrap和jQuery的js和css

<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
          integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<!-- Bootstrap 的 JS和jQuery 文件 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>

引入判断密码强度开源的公认的算法

<script src="https://cdn.bootcdn.net/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>

HTML结构

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <h4 class="mb-3">注册模板</h4>
            <form class="needs-validation" novalidate>

                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="firstName">用户名</label>
                        <input type="text" class="form-control" id="firstName" placeholder="请输入用户名"
                               value="https://www.qinyi.info/" readonly>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="password">密码</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" placeholder="">
                        <div class="input-group-append">
                            <span class="input-group-text" id="basic-addon2">弱密码</span>
                        </div>
                    </div>

                    <div class="progress" style="margin-top: 20px;
    background: linear-gradient(to right, #e9ecef,#e9ecef 30%,#fff 30%,#FFF 35%,#e9ecef 35%,#e9ecef 65%,#fff 65%,#fff 70%,#e9ecef 70%,#e9ecef 100%);">
                    </div>
                </div>

                <hr class="mb-4">
                <button class="btn btn-primary btn-lg btn-block" type="submit">注册</button>
            </form>
        </div>
    </div>
</div>

JavaScript代码

    password.addEventListener('input', function () {
        var value = this.value;
        let date = zxcvbn(value).guesses_log10
        let value1 = Math.floor(Number(date)) * 5;
        if(value == 0){
            $(".progress").css("background", "linear-gradient(to right, #e9ecef,#e9ecef 30%,#fff 30%,#FFF 35%,#e9ecef 35%,#e9ecef 65%,#fff 65%,#fff 70%,#e9ecef 70%,#e9ecef 100%)");
        }else if (date < 6) {
            $(".progress").css("background", "linear-gradient(to right, red,red " + value1 + "%,#e9ecef " + value1 + "%,#e9ecef 30%,#fff 30%,#FFF 35%,#e9ecef 35%,#e9ecef 65%,#fff 65%,#fff 70%,#e9ecef 70%,#e9ecef 100%)");
        } else if (date > 6 && date < 13) {
            $("#basic-addon2").html("中强度");
            $(".progress").css("background", "linear-gradient(to right, red,red 30%,#fff 30%,#FFF 35%,orange 35%,orange " + value1 + "%,#e9ecef " + value1 + "%,#e9ecef 65%,#fff 65%,#fff 70%,#e9ecef 70%,#e9ecef 100%)");
        } else if (date < 21) {
            $("#basic-addon2").html("高强度");
            $(".progress").css("background", "linear-gradient(to right, red,red 30%,#fff 30%,#FFF 35%,orange 35%,orange 65%,#fff 65%,#fff 70%,green 70%,green " + value1 + "%,#e9ecef " + value1 + "%,#e9ecef 100%)");
        } else {
            $("#basic-addon2").html("高强度");
            $(".progress").css("background", "linear-gradient(to right, red,red 30%,#fff 30%,#FFF 35%,orange 35%,orange 65%,#fff 65%,#fff 70%,green 70%,green 100%)");
        }
    });