正则表达式练习题

• • 一、用户名、密码和手机号的验证
  • • 1、案例要求
    • 2、案例分析
    • 3、HTML和CSS代码
    • 4、JS代码
  • 二、密码强度
  • • 1、案例要求
    • 2、案例分析
    • 3、HTML和CSS代码
    • 4、JS代码的实现
  • 三、书写正则验证邮箱
  • • 1、邮箱的验证
    • 2、代码的实现
  • 四、书写正则验证0~255的数字

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

1、案例要求

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

2、案例分析

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

3、HTML和CSS代码

    
用户名：您输入的内容不符合规则
密  码：您输入的内容不符合规则
手机号：您输入的内容不符合规则
提交

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代码

    
密码 : 
弱中强

4、JS代码的实现

        // 获取标签对象const oIpt = document.querySelector('input');const oSpans = [...document.querySelectorAll('span')];// 给密码框添加输入事件oIpt.oninput = function () {// 获取输入框的valueconst 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'));