JS 正则——密码强度验证

需求:

• 密码包含 数字-字母-符号(!@#);
  • 1. 包含一种~弱;
  • 2. 包含两种~中;
  • 3. 包含三种~强

逻辑：

• 判断密码符合这三种符号的哪些
  • 1.拿到密码
  • 2.准备正则符合三个强度的哪些？
  • 3.根据密码的强度，决定高亮几个span标签

代码

html

    <form>
        <label>
            密码 : <input type="text">
            <p>
                <span>弱</span>
                <span>中</span>
                <span>强</span>
            </p>
        </label>
    </form>

css

        * {
            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;
        }

js

        // 0.获取标签
        const inp = document.querySelector('input')
        const spans = [...document.querySelectorAll('span')]

        // 1.给input绑定事件
        inp.oninput = function () {
            // 1.1拿到密码
            const value = this.value
            // 1.2准备正则
            const r1 = /\d/
            const r2 = /[a-zA-Z]/
            const r3 = /[!@#]/
            //1.3通过正则判断当前密码属于哪个强度等级
            let level = 0 //默认为0级
            if (r1.test(value)) {
                // 当前分支执行，说明当前密码包含数字
                level++
            }
            if (r2.test(value)) {
                // 当前分支执行，说明当前密码包含字母
                level++
            }
            if (r3.test(value)) {
                // 当前分支执行，说明当前密码包含特殊符号
                level++
            }

            /**
             * 1.4根据密码强度决定高亮哪些span标签
             * 
             *    思路：
             *        1.给所有span取消类名
             *        2.给我们需要的span添加类名
            */
            for (let i = 0; i < spans.length; i++) {
                // 1.给所有span取消类名
                spans[i].className = ''

                /**
                 * 2.给我们需要的span添加类名
                 *    level存储的是密码的强度等级
                 *      level === 1   高亮的是spans[0]
                 *      level === 2   高亮的是spans[0]spans[1]
                 *      level === 3   高亮的是spans[0]spans[1]spans[2]
                */
                if (i < level) {
                    spans[i].className = 'active'
                }

                /**
                 * 假设当前level === 2
                 * 
                 *    第一轮for循环 i === 0
                 *         内部判断条件 i < level  满足条件，执行spans[i].className = 'active'
                 * 
                 *    第二轮for循环 i === 1
                 *         内部判断条件 i < level  满足条件，执行spans[i].className = 'active'
                 * 
                 *    第三轮for循环 i === 2
                 *         内部判断条件 i < level  不满足条件，不执行
                */
            }
        }