密码强度的实现

密码强度

原理

使用字符串,函数与运算符.

一般密码会有数字,字母(大小写),特殊符号四种类型.

1:密码中只包含一种类型;
2:密码中包含两种类型;
3:密码中包含三种类型;
4:密码中包含所以类型.

用以下形式表示四种字符的类型.

字符类型	二进制数字	ASCII
数字	0001	48~57
小写字母	0010	97~122
大写字母	0100	65~90
特殊字符	1000	ohter

例子:

字符类型	二进制数字	十进制
1234	0001/0001/0001/0001	0001->1
abcd	0010/0010/0010/0010	0010->2
ABCD	0100/0100/0100/0100	0100->4
!@#$	1000/1000/1000/1000	1000->8
Aa1!	0100/0010/0001/1000	1111->15

即:把密码变成4位二进制数,1的个数越多,密码强度越大.

把二进数转换为强度

每次与1做”位于”(&1)运算,假如为真,则强度+1(level++),否则不变,每循环一次,位移(>>>)操作一次.

如:Abcd1234!:1111

1. 1111 & 1;level=1;右移一位,得0111;
2. 0111 & 1;level=2;右移一位,得0011;
3. 0011 & 1;level=3;右移一位,得0001;
4. 0001 & 1;level=4;

所以密码强度为4.

使用jQuery实现代码

<script>
    var $password = $('#password');
    var $span = $('span');
    $password.on('keyup',()=>{
        let password = $password.val();
        checkLevel(password);
    })
    function Chartype(num){//检测字符串类型
        if(num >= 48 && num <= 57){//数字
            return 1;
        }else if(num >= 97 && num <= 122){//小写字母
            return 2;
        }else if(num >= 65 && num <= 90){//大写字母
            return 4;
        }else{//符号
            return 8;
        }
    }
    function checkLevel(str){//检测密码强度
        let check = 0;
        let level = 0;
        for(let i = 0;i<str.length;i++){
            check |= Chartype(str.charCodeAt(i));
        }
        for(var i = 0;i <= 4;i++){
            if(check & 1){//每次循环位于运算
                level++;
            }
            check = check >>> 1;//运算结束后右移一位
        }
        if(str.length >= 8){//当密码大于8执行
            selectLevel(level);
        }else{//小于8清空
            level = 0;
            $span.removeClass('active');
        }

    }
    function selectLevel(level){//根据密码强度切换类
            switch(level){
                case 1:
                    $span.removeClass('active');
                    $('.first').addClass('active');
                    break;
                case 2:
                    $span.removeClass('active');
                    $('.second').addClass('active');
                    break;
                case 3:
                    $span.removeClass('active');
                    $('.thrid').addClass('active');
                    break;  
                case 4:
                    $span.removeClass('active');
                    $('.fourth').addClass('active');
                    break;  
            }
    }

</script>