【Javascript学习笔记】【DOM实战+对象— —密码强度实时认证】

目录

密码强度实时认证

效果

权重规则

字符权重：
数字1，字母2，其他字符3

规则：
党密码长度小于6时不符合标准；
长度>=6，强度<10；————弱
长度>=6，强度>=10且<15；————中
长度>=6，强度>=15；————强

代码

html部分

    <h2>密码强度实时验证h2>
    <input type="password" name="" id="pwdStren">
    <div id="show">div>

css部分

    #pwdStren{ float: left; }
    #show{ float: left; border-radius: 30px; padding-right:10px; width: 66px; text-align: right; }

js部分

    function setBar(_this,optionType) {
        for(var cs in optionType){//for in遍历optionType
            _this.style[cs] = optionType[cs];
        }
        return _this;
    }

    function pwdStren(pwdStren,show) {
        var self = this;
        pwdStren.onkeyup = function() {//每输入一个触发
            var barColor = ["red","rgba(255,165,0,0.8)","rgba(230,219,94,0.8)","rgba(0,128,0,0.5)","#fff"],
            style1 = {
                "width":"35px",
                "color":barColor[4],
                "background":barColor[1],
            },
            style2 = {
                "width":"70px",
                "color":barColor[4],
                "background":barColor[2],
            },
            style3 = {
                "width":"105px",
                "color":barColor[4],
                "background":barColor[3],
            },
            msgs = ["密码太短","弱","中","强"],
            pwd = pwdStren.value,
            pwdL = pwd.length,
            streng = 0;

            console.log("密码："+pwd);
            var charStreng =function(char){
                if(char>=48 && char<=57){//数字
                    return 1;
                }else if(char>=97 && char <=122){//字母
                    return 2;
                }else{//其他特殊字符
                    return 3;
                }
            }

            if(pwdL<6){
                show.innerText=msgs[0];
                setBar(show,{
                    "color":barColor[0],
                    "background":barColor[4],
                    "width":"66px"
                });
            }else{
                //计算总强度
                for(var i=0;iif (streng<10) {
                    show.innerText = msgs[1];
                    setBar(show,{
                        "color":style1.color,
                        "background":style1.background,
                        "width":style1.width
                    })
                }else if (streng<15) {
                    show.innerText = msgs[2];
                    setBar(show,{
                        "color":style2.color,
                        "background":style2.background,
                        "width":style2.width
                    })
                }else if (streng>=15) {
                    show.innerText = msgs[3];
                    setBar(show,{
                        "color":style3.color,
                        "background":style3.background,
                        "width":style3.width
                    })
                }
            }

        }
    }

    pwdStren(document.getElementById("pwdStren"),document.getElementById("show"));

引用到的知识点

1.对象

快捷链接

全部Javascript学习笔记的目录 Click Here>>
github源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~