JS 通过正则表达式来判断密码等级强弱

在之前的学习中,我们较为详细的学习了正则表达式的基础知识,我们也知道正则表达式多数用于对字符串进行判断;

比如,我们在注册用户名时是否符合语法规则,设置密码时判断密码的安全等级或者判断邮箱输入是否正确等

下面,我们就以判断密码安全等级为例,通过一个完整的代码案例来帮助大家更好的学习正则!

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

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

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

        /**
         *  逻辑:
         *      判断密码符合这三种符号的那些
         * 
         *      1. 拿到密码
         *      2. 准备正则符合三个强度的那些?
         *      3. 根据密码的强度, 决定高亮几个 span 标签
        */

        // 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[0].className = 'active'
                 *      第二轮 for 循环 i === 1
                 *          内部判断条件 i < level          满足条件, 执行  spans[1].className = 'active'
                 *      第三轮 for 循环 i === 2
                 *          内部 判断条件 i < level         不满足条件, 不执行了~
                */
            }
        }