1.需求

• 密码包含 数字-字母-符号(!@#)

1. 包含一种~弱
2. 包含两种~中
3. 包含三种~强

逻辑

• 判断密码符合这三种符号的那些

1. 拿到密码
2. 准备正则(符合三个强度的那些)
3. 根据密码强度决定高亮哪几个span标签

代码

1. html + css

    //html + css
    <form>
        <label>
            密码 : <input type="text">
            <p>
                <span class="r">弱</span>
                <span class="z">中</span>
                <span class="q">强</span>
            </p>
        </label>
    </form>
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 500px;
            padding: 20px;
            border: 5px solid pink;
            border-radius: 15px;
            margin: 50px auto;
        }

        label {
            font-size: 20px;
        }

        label>input {
            font-size: 20px;
            padding-left: 20px;
        }

        label>p {
            height: 30px;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        label>p>span {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
            color: #fff;
        }

        label>p>span:nth-child(1).active {
            background-color: red;
        }

        label>p>span:nth-child(2).active {
            background-color: orange;
        }

        label>p>span:nth-child(3).active {
            background-color: green;
        }
    </style>

2. js

//0.获取标签
const inp = document.querySelector('input')
const spans = [...document.querySelectorAll('span')]
//1.给input绑定事件
inp.oninput = function(){
    //1.拿到输入的密码值
    const value = this.value
    //2.准备正则
    const reg1 = /\d/
    const reg2 = /[a-zA-Z]/
    const reg3 = /[!@#]/
    //3.通过正则判断密码强度
    let level = 0
    if(reg1.test(value)){
    //密码包含数字
        level++
    }
    if(reg2.test(value)){
    //密码包含字母
        level++
    }
    if(reg3.test(value)){
    //密码包含特殊字符
        level++
    }
    
    //4.根据密码强度判断哪个span高亮显示
    for(let i = 0; i < spans.length; i++){
        //给所有的span取消类名
        spans[i].className = ''
        //给我们需要的span添加类名
        if(i < level){
            span[i].className = 'active'
        }
    }
}