【学习笔记53】JavaScript正则表达式练习题

一、用户名、密码和手机号的验证

1、案例要求

• 用户名以数字或字母开头, 6~11 位;
• 密码6~12位数字字母下划线;
• 手机号11位数字

2、案例分析

1. input框的失焦事件
2. input输入的内容
3. 判断输入的内容, 是否符合要求，不符合, 警告文本提示

3、HTML和CSS代码

    <form action="">
        <p>
            用户名：<input type="text" class="name">
            <span>您输入的内容不符合规则</span>
        </p>
        <p>
            密&ensp;&ensp;码：<input type="text" class="pwd">
            <span>您输入的内容不符合规则</span>
        </p>
        <p>
            手机号：<input type="text" class="num">
            <span>您输入的内容不符合规则</span>
        </p>
        <button>提交</button>
    </form>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        form{
            width: 550px;
            height: 250px;
            border: 3px solid pink;
            margin: 40px auto;
            padding: 20px;
            font-size: 18px;
            border-radius: 3%;
        }
        input{
            width: 200px;
            height: 27px;
            margin-bottom: 20px;
        }
        button{
            width: 150px;
            height: 40px;
            font-size: 16px;
            margin-top: 10px;
        }
        p{
            display: flex;
        }
        span{
            color: red;
            font-size: 16px;
            display: none;
            margin-right: 5px;
        }
    </style>

4、JS代码

4.1 代码的实现

        // 获取标签对象
        const oIptName = document.querySelector('.name');   //用户名
        const oIptPwd  = document.querySelector('.pwd');     //密码
        const oIptNum  = document.querySelector('.num');     //号码


        // 给用户名添加失焦事件
        oIptName.addEventListener('blur', function(e){
            // 拿到用户输入的用户名
            let value = e.target.value;

            // 定义正则表达式 以数字或字母开头、6~11 位;
            let reg = /^[0-9A-Za-z]{6,11}$/;

            // 根据正则表达式判断
            if(reg.test(value)){
                e.target.nextElementSibling.style.display = 'none';
            }else{
                e.target.nextElementSibling.style.display = 'block';
            }
        })

        oIptPwd.addEventListener('blur', function(e){
            // 拿到用户输入的密码
            let value = e.target.value;

            // 定义正则表达式 6~12位数字字母下划线;
            let reg = /^\w{6,12}$/;

            // 根据正则表达式判断
            if(reg.test(value)){
                e.target.nextElementSibling.style.display = 'none';
            }else{
                e.target.nextElementSibling.style.display = 'block';
            }
        })

        oIptNum.addEventListener('blur', function(e){
            // 拿到用户输入的手机号
            let value = e.target.value;

            // 定义正则表达式 11位数字;
            let reg = /^\d{11}$/;

            // 根据正则表达式判断
            if(reg.test(value)){
                e.target.nextElementSibling.style.display = 'none';
            }else{
                e.target.nextElementSibling.style.display = 'block';
            }
        })

4.2 代码优化

        // 获取标签对象
        const oIpt = [...document.querySelectorAll('input')];

        // 创建正则表达式 以对象形式
        const reg = {
            name: /^[0-9A-Za-z]{6,11}$/,
            pwd: /^\w{6,12}$/,
            num: /^\d{11}$/
        }

        // 循坏遍历
        oIpt.forEach(function(item){

            // 给对象添加失焦事件
            item.addEventListener('blur', function(){
                // 获取用户终正在输入的数值
                let value = this.value;

                // 获取正则
                let fnReg = reg[this.className];

                // 根据正则去判断
                if (fnReg.test(value)) {
                    // 字符串符合条件
                    this.nextElementSibling.style.display = 'none'
                } else {
                    // 字符串不符合条件
                    this.nextElementSibling.style.display = 'block'
                }
            })
        })

二、密码强度

1、案例要求

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

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

2、案例分析

判断密码符合这三种格式的那些

1. 拿到密码
2. 判断正则符合三个强度的那些
3. 根据强度让对应的span高亮

3、HTML和CSS代码

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

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 500px;
            height: 150px;
            padding: 20px;
            border: 2px solid #000;
            border-radius: 15px;
            margin: 50px auto;
        }

        label {
            font-size: 20px;
        }

        label>input {
            font-size: 20px;
            padding-left: 20px;
            margin-bottom: 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>

4、JS代码的实现

        // 获取标签对象
        const oIpt = document.querySelector('input');
        const oSpans = [...document.querySelectorAll('span')];

        // 给密码框添加输入事件
        oIpt.oninput = function () {
            // 获取输入框的value
            const value = this.value;

            // 定义正则表达式 判断密码强度
            const l1 = /\d/;
            const l2 = /[a-zA-Z]/;
            const l3 = /[!@#]/;

            //通过正则判断当前密码强度
            // 定义变量 用于存储密码强度的等级，默认为0级
            let level = 0;  
            if (l1.test(value)) { level++ };
            if (l2.test(value)) { level++ };
            if (l3.test(value)) { level++ };
            /**
             *  根据密码强度决定那些span高亮
             * 
             *  level == 3      oSpans[0][1][2]  高亮显示
             *  level == 2      oSpans[0][1]     高亮显示
             *  level == 1      oSpans[0]        高亮显示
            */

            // 通过循坏判断密码强度的等级
            for (let i = 0; i < oSpans.length; i++) {

                oSpans[i].className = ''

                if (i < level) {

                    oSpans[i].className = 'active'
                }
            }
        }

三、书写正则验证邮箱

1、邮箱的验证

1. @前面只能包含数字字母下划线,
2. @前只能出现6~10位, 不能以下划线开头;
3. 邮箱类型只接受163与qq; 后缀只接受com与cn

2、代码的实现

        //定义正则表达式 
        const reg = /^[0-9A-Za-z]\w{5,9}@(163|qq)\.(com|cn)$/;   

        //定义邮箱 进行验证
        const str1 = 'Wangyi@163.com';
        const str2 = 'Wangyi@qq.com';
        const str3 = 'Wangyi@163.cn';
        const str4 = 'Wangyi@qq.cn';

        console.log(reg.test(str1));
        console.log(reg.test(str2));
        console.log(reg.test(str3));
        console.log(reg.test(str4));

四、书写正则验证0~255的数字

        /**
         *      0~9         \d                           |
         *      10~99       \d{2}    ->    ([1-9]\d)     |
         *      100~199     1\d{2}                       |
         *      200~249     2[0-4]\d                     |
         *      250~255     25[0-5]
        */

        const reg = /^(\d|([1-9]\d)|1\d{2}|2[0-4]\d|25[0-5])$/;

        console.log(reg.test('0'));
        console.log(reg.test('10'));
        console.log(reg.test('100'));
        console.log(reg.test('200'));
        console.log(reg.test('255'));
        console.log(reg.test('12345'));