密码验证 : 密码强度验证

2020-3-18 前端达人

密码强度验证

需求

首先我们需要知道需求是什么？这很重要！

要知道我们写的一切逻辑都是建立在需求之上

当输入框聚焦时提示密码要求

当密码符合要求时隐藏提示并给予反馈

密码等级低时提示密码等级为低

密码等级一般时提示密码等级为中

密码等级高时提示密码等级为高

当密码不符合要求时重新打开提示

思考如何构建函数
通过上面的需求你能想到的函数时什么？你能想到的逻辑又是什么？

首先提示的显示隐藏我们可以用事件绑定或者事件监听来做

其次我们需要利用正则来判断密码等级

当密码等级为低时显示红色

当密码等级为中时显示黄色

当密码等级为高时显示绿色

最后根据密码等级来渲染页面也就是反馈给用户的样式

建议 :

在这里尽量把每个函数的功能区分好构思好

不仅要让自己能看懂还要让别人能看懂

这样的代码才是好的代码可读性更好可维护性更高

实现功能实现需求

HTML结构

在提示盒子的内部写3个div 不同等级给予不同颜色不同数量的提示

 密码 : <input type="text" id="ipt">
    <p id="p">请输入6-20位的带有数字字母或者特殊符号的密码</p>
    <div class="box">
        <span></span>
        <div></div>
        <div></div>
        <div></div>
    </div>

不管样式行为再怎么花里胡哨也一定要先把结构里要出现的元素写出来

CSS样式

由于考虑到等级分为三种所以给提示盒子分3中不同的class类名

每一个类名对应的子元素的样式也不同

到js部分我们只需要操作class类名就可以了

   <style>
        *{
            margin : 0 ;
            padding : 0 ;
        }
        //提示盒子
        .box{
            position : absolute;
            top : 2px;
            left : 200px;
        }
        .box div,
        .box span{
            margin-right : 5px;
            width : 20px;
            height : 20px;
            float : left;
        }
        //低等级
        .box.low :nth-child(2){
            background : red;
        }
        //中等级
        .box.middle div{
            background : yellow;
        }
        .box.middle :last-child{
            background: #fff;
        }
        //高等级
        .box.high div{
            background : green;
        }
        //提示文字默认隐藏
        p{
            display : none;
        }
    </style>

JS行为

 <script>
        //获取需要操作的元素
        let ipt = document.getElementById('ipt');
        let p = document.getElementById('p');
        let div = document.getElementsByClassName('box')[0];
        var tip = false; //聚焦显示提示的开关
        //添加聚焦事件
        ipt.addEventListener('focus' , () => {
            //由于存在用户输入正确的密码失焦再操作的可能 所以需要验证开关
            if(!tip) {
                p.style.display = 'block';
            }
            //默认选中文字 提升用户体验
            ipt.select();
        })
        //添加输入时的事件
        ipt.addEventListener('input' , () => {
            //拿到用户输入的密码字符串
            let str = ipt.value;
            //当密码不符合要求时 要及时给予反馈 及时清除样式
            if(str.length < 6 ||str.length > 20 || /[^(\da-zA-Z\_\#\@\$\^\%\*\&\!\~\+\-)]/.test(str) || str === "") {
                p.style.display = 'block';
                removeClass(div);
                div.children[0].innerHTML = "";
                tip = true;
                //如果不符合要求 就没必要判断等级了 直接结束判断
                return false;
            }else{
                p.style.display = 'none';
            }
            //判断密码等级
            let res = level(str);
            //根据等级添加样式
            randerLevel(res);
        })
        //判断密码等级函数
        function level (str) {
            let level = 0;
            //当用户输入的字符串符合一定规则 让等级+1
            if(/\d+/.test(str)) {
                level ++;
            }
            if(/[a-zA-Z]+/.test(str)) {
                level ++;
            }
            if(/[\_\#\@\$\^\%\*\&\!\~\+\-]+/.test(str)) {
                level ++;
            }
            return level;
        }
        //添加样式函数
        function randerLevel (level) {
            //在添加样式前先清空样式
            removeClass(div);
            div.children[0].innerHTML = "";
            //根据等级添加对应的类名
            switch (level) {
                case 1 :
                    div.children[0].innerHTML = '低';
                    //元素存在不止一个类名 用 += 更好
                    div.className += ' low';
                    break;
                case 2 :
                    div.children[0].innerHTML = '中';
                    div.className += ' middle';
                    break;
                case 3 :
                    div.children[0].innerHTML = '高';
                    div.className += ' high';
                    break;
            }
        }
        //去等级类名函数
        function removeClass(ele){
            let reg = /low|middle|high/g;
            if(reg.test(ele.className)) {
                //不要忘记把值赋回去 replace返回的是新字符串
                ele.className = ele.className.replace(reg , "");
            }
        }
    </script>

当密码等级为低时给予红色反馈

当密码等级为中时给予黄色反馈
当密码等级为高时给予绿色反馈
当密码长度太短或太长时不给予颜色反馈给予文字反馈

————————————————
版权声明：本文为CSDN博主「豆浆不好喝」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45178648/article/details/104885417

分享本文至：

« JS中数据类型转换 JS设计模式之单例模式、组合模式、观察者模式、策略模式 »