image.png

image.png

image.png

image.png

<style>
    body{
        font-family: "Microsoft YaHei";
        font-size: 13px;
    }
    #pwd{
        border:1px solid #ccc;
        border-radius : 3px;
        padding:0.5em;
        margin-right: 10px;
        width: 185px;
    }
    #pwd_err{
        color: #f00;
        display:none;
    }
    #pwd_tip font{
        color: #F00
    }
    .level_block_group{
        height:10px;
        margin-left: 5em;
    }
    .level_text_group{
        height:20px;
        margin-left: 5em;
    }
    .level_block{
        float:left;
        background:#d6d3d3;
        width:62px;
        height:4px;
        margin-top:5px;
        _margin-top:0px;
        margin-left:5px;
        _height:2px;
        font-size:0px;
    }
    .level_text{
        float:left;
        width:62px;
        margin-left:5px;
        text-align:center;
        color:#b0adad;
        font-size:12px;
    }
    .level_1_active{
        float:left;
        background:#ff3300;
        width:62px;
        height:4px;
        margin-top:5px;
        margin-left:5px;
        _margin-top:0px;
        _height:2px;
        font-size:0px;
    }
    .level_2_active{
        float:left;
        background: #ff6400;
        width:62px;
        height:4px;
        margin-top:5px;
        margin-left:5px;
        _margin-top:0px;
        _height:2px;
        font-size:0px;
    }
    .level_3_active{
        float:left;
        background: #06b172;
        width:62px;
        height:4px;
        margin-top:5px;
        margin-left:5px;
        _margin-top:0px;
        _height:2px;
        font-size:0px;
    }
</style>

 <div>
        <label>设置密码：</label>
        <input id="pwd" type="password">
        <span id="pwd_tip" style="color: #898989">
            <font>*</font> 6-16位，由字母（区分大小写）、数字、符号组成
        </span>
        <span id="pwd_err">6-16位，由字母（区分大小写）、数字、符号组成</span>
    </div>
    <div class="level_block_group">
        <div class="level_block" id='level_1'> </div>
        <div class="level_block" id='level_2'> </div>
        <div class="level_block" id='level_3'> </div>
    </div>
    <div class="level_text_group">
        <div class="level_text"> 弱</div>
        <div class="level_text"> 中</div>
        <div class="level_text"> 强</div>
    </div>

<script type="text/javascript">
    const _pwd =  $('#pwd');
    const _level_1 = $('#level_1');
    const _level_2 = $('#level_2');
    const _level_3 = $('#level_3');

    _pwd.focus(function () {
        _level_1.attr('class', 'level_1_active');
        _pwd.keyup();
    });

    _pwd.keyup(function () {
        const __th = $(this);

        if (!__th.val()) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Primary();
            return;
        }

        if (__th.val().length < 6) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Weak();
            return;
        }

        var _r = checkPassword(__th);
        if (_r < 1) {
            $('#pwd_tip').hide();
            $('#pwd_err').show();
            Primary();
            return;
        }

        if (_r > 0 && _r < 2) {
            Weak();
        } else if (_r >= 2 && _r < 4) {
            Medium();
        } else if (_r >= 4) {
            Tough();
        }

        $('#pwd_tip').hide();
        $('#pwd_err').hide();
    });

    function Primary() {
        _level_1.attr('class', 'level_block');
        _level_2.attr('class', 'level_block');
        _level_3.attr('class', 'level_block');
    }

    function Weak() {
        _level_1.attr('class', 'level_1_active');
        _level_2.attr('class', 'level_block');
        _level_3.attr('class', 'level_block');
    }

    function Medium() {
        _level_1.attr('class', 'level_1_active');
        _level_2.attr('class', 'level_2_active');
        _level_3.attr('class', 'level_block');
    }

    function Tough() {
        _level_1.attr('class', 'level_1_active');
        _level_2.attr('class', 'level_2_active');
        _level_3.attr('class', 'level_3_active');
    }

    function checkPassword(pwdinput) {
        var maths, smalls, bigs, corps, cat, num;
        var str = $(pwdinput).val();
        var len = str.length;

        var cat = /.{16}/g;
        if (len == 0) return 1;
        if (len > 16) {
            $(pwdinput).val(str.match(cat)[0]);
        }
        cat = /.*[\u4e00-\u9fa5]+.*$/
        if (cat.test(str)) {
            return -1;
        }
        cat = /\d/;
        var maths = cat.test(str);
        cat = /[a-z]/;
        var smalls = cat.test(str);
        cat = /[A-Z]/;
        var bigs = cat.test(str);
        var corps = corpses(pwdinput);
        var num = maths + smalls + bigs + corps;

        if (len < 6) { return 1; }

        if (len >= 6 && len <= 8) {
            if (num == 1) return 1;
            if (num == 2 || num == 3) return 2;
            if (num == 4) return 3;
        }

        if (len > 8 && len <= 11) {
            if (num == 1) return 2;
            if (num == 2) return 3;
            if (num == 3) return 4;
            if (num == 4) return 5;
        }

        if (len > 11) {
            if (num == 1) return 3;
            if (num == 2) return 4;
            if (num > 2) return 5;
        }
    }

    function corpses(pwdinput) {
        var cat = /./g;
        var str = $(pwdinput).val();
        var sz = str.match(cat);
        for(var i = 0;i<sz.length;i++) {
            cat = /\d/;
            maths_01 = cat.test(sz[i]);
            cat = /[a-z]/;
            smalls_01 = cat.test(sz[i]);
            cat = /[A-Z]/;
            bigs_01 = cat.test(sz[i]);
            if (!maths_01 && !smalls_01 && !bigs_01) { return true; }
        }
        return false;
    }
</script>