通过正则写一个密码强度验证的练习

效果图：

知识点：灵活运用正则

思路：先定义好正则的规则，侦听input事件，当用户输入时进行正则验证。

html:

<div>
        <input type="text">
        <ul>
            <li>弱</li>
            <li>中</li>
            <li>强</li>
        </ul>
   </div>

css:

*{
    margin: 0;
    padding: 0;
}
div{
    width: 500px;
    min-height: 200px;
    margin: 50px auto;
}
div input{
    border: 1px solid #ccc;
    width: 460px;
    height: 30px;
    display: block;
    margin: 10px auto;
}
div ul{
    width: 460px;
    height: 30px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
div ul li{
    list-style: none;
    width: 32%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    background-color: #ccc;
}
div ul li:nth-child(1).active{
    background-color: red;
}
div ul li:nth-child(2).active{
    background-color: orange;
}
div ul li:nth-child(3).active{
    background-color: greenyellow;
}

JS:

<script>
        // 获取元素
        const txt = document.querySelector('input')
        const aLi = document.querySelectorAll('ul li')

        // 定义三个密码强度的规则，规则由你自己制定
        // reg1表示的是密码强度为弱
        const reg1 = /\d/
        // reg2表示的是密码强度为中（累加1）
        const reg2 = /[a-z]/
        // reg3表示的是密码强度为强（累加1和2）
        const reg3 = /[@./_!]/

        // 失去焦点进行验证
        txt.oninput  = function(){
            // 声明一个变量作为登记
            let level = 0
            // 进行正则验证
            if(reg1.test(this.value)){
                level++
            }
            if(reg2.test(this.value)){
                level++
            }
            if(reg3.test(this.value)){
                level++
            }
            // 遍历li元素并进行赋值操作
            for(let i=0; i<aLi.length; i++){
                // 做排他
                aLi[i].classList.remove('active')
                // 进行登记判断
                // 1>0
                // 2>1
                // 3>2
                if(level>i){
                    aLi[i].classList.add('active')
                }
            }
        }

   </script>