密码验证 : 密码强度验证 - 蓝蓝设计_UI设计公司

帝皇彩票官网

密码验证 : 密码强度验证

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>



20200315203557273.png

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>

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

2020031520385174.png


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


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

标签: js

Powered by sitemap
吉利彩票投注 桔子彩票注册 大象彩票登入 福建11选5 桔子彩票平台 桔子彩票官网 桔子彩票开奖 吉利彩票登陆 桔子彩票官网 吉林快3计划