文章目录

Web APIs - 第6天笔记

Web APIs - 第6天笔记

目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力

正则表达式
综合案例
阶段案例

1正则表达式

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景：

例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g1a95dmg-1680687737281)(assets/1676079666366.png)]

1.1正则基本使用

定义规则
```
const reg =  /表达式/
```
- 其中/ /是正则表达式字面量
- 正则表达式也是对象
使用正则
- test()方法 用来查看正则表达式与指定的字符串是否匹配
- 如果正则表达式与指定的字符串匹配，返回true，否则false

  <script>
    // 正则表达式的基本使用
    const str = 'web前端开发'
    // 1. 定义规则
    const reg = /web/

    // 2. 使用正则  test()  规则在前
    console.log(reg.test(str))  // true  如果符合规则匹配上则返回true
    console.log(reg.test('java开发'))  // false  如果不符合规则匹配上则返回 false
    // 3. exec()
    console.log(reg.exec(str))  // 返回数组
  </script>

2元字符

普通字符:

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
普通字符只能够匹配字符串中与它们相同的字符。
比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/

元字符(特殊字符）

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/

2.1边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qzzrdLID-1680687737282)(assets/1676080081650.png)]

如果 ^ 和 $ 在一起，表示必须是精确匹配如果^ 出现在[]括号里边，则表示的是，除去条件之外的

<body>
  <script>
    // 元字符之边界符
    // 1. 匹配开头的位置 ^
    const reg = /^web/
    console.log(reg.test('web前端'))  // true
    console.log(reg.test('前端web'))  // false
    console.log(reg.test('前端web学习'))  // false
    console.log(reg.test('we'))  // false

    // 2. 匹配结束的位置 $
    const reg1 = /web$/
    console.log(reg1.test('web前端'))  //  false
    console.log(reg1.test('前端web'))  // true
    console.log(reg1.test('前端web学习'))  // false
    console.log(reg1.test('we'))  // false  

    // 3. 精确匹配 ^ $  默认的是重复一次 多次需要手动添加
    const reg2 = /^web$/
    console.log(reg2.test('web前端'))  //  false
    console.log(reg2.test('前端web'))  // false
    console.log(reg2.test('前端web学习'))  // false
    console.log(reg2.test('we'))  // false 
    console.log(reg2.test('web'))  // true
    console.log(reg2.test('webweb'))  // flase 
  </script>
</body>

2.2量词

量词用来设定某个模式重复次数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z5o5jOmX-1680687737283)(assets/1676080185383.png)]

注意：逗号左右两侧千万不要出现空格

<body>
  <script>
    // 元字符之量词
    // 1. * 重复次数 >= 0 次
    const reg1 = /^w*$/
    console.log(reg1.test(''))  // true
    console.log(reg1.test('w'))  // true
    console.log(reg1.test('ww'))  // true
    console.log('-----------------------')

    // 2. + 重复次数 >= 1 次
    const reg2 = /^w+$/
    console.log(reg2.test(''))  // false
    console.log(reg2.test('w'))  // true
    console.log(reg2.test('ww'))  // true
    console.log('-----------------------')

    // 3. ? 重复次数  0 || 1 
    const reg3 = /^w?$/
    console.log(reg3.test(''))  // true
    console.log(reg3.test('w'))  // true
    console.log(reg3.test('ww'))  // false
    console.log('-----------------------')


    // 4. {n} 重复 n 次
    const reg4 = /^w{3}$/
    console.log(reg4.test(''))  // false
    console.log(reg4.test('w'))  // flase
    console.log(reg4.test('ww'))  // false
    console.log(reg4.test('www'))  // true
    console.log(reg4.test('wwww'))  // false
    console.log('-----------------------')

    // 5. {n,} 重复次数 >= n 
    const reg5 = /^w{2,}$/
    console.log(reg5.test(''))  // false
    console.log(reg5.test('w'))  // false
    console.log(reg5.test('ww'))  // true
    console.log(reg5.test('www'))  // true
    console.log('-----------------------')

    // 6. {n,m}   n =< 重复次数 <= m
    const reg6 = /^w{2,4}$/
    console.log(reg6.test('w'))  // false
    console.log(reg6.test('ww'))  // true
    console.log(reg6.test('www'))  // true
    console.log(reg6.test('wwww'))  // true
    console.log(reg6.test('wwwww'))  // false

    // 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败

  </script>

2.3范围 []

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pePr5XbK-1680687737284)(assets/1676080296168.png)]

<body>
  <script>
    // 元字符之范围  []  
    // 1. [abc] 匹配包含的单个字符， 多选1
    const reg1 = /^[abc]$/
    console.log(reg1.test('a'))  // true
    console.log(reg1.test('b'))  // true
    console.log(reg1.test('c'))  // true
    console.log(reg1.test('d'))  // false
    console.log(reg1.test('ab'))  // false

    // 2. [a-z] 连字符 单个
    const reg2 = /^[a-z]$/
    console.log(reg2.test('a'))  // true
    console.log(reg2.test('p'))  // true
    console.log(reg2.test('0'))  // false
    console.log(reg2.test('A'))  // false
    // 想要包含小写字母，大写字母 ，数字
    const reg3 = /^[a-zA-Z0-9]$/
    console.log(reg3.test('B'))  // true
    console.log(reg3.test('b'))  // true
    console.log(reg3.test(9))  // true
    console.log(reg3.test(','))  // flase

    // 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
    const reg4 = /^[a-zA-Z0-9_]{6,16}$/
    console.log(reg4.test('abcd1'))  // false 
    console.log(reg4.test('abcd12'))  // true
    console.log(reg4.test('ABcd12'))  // true
    console.log(reg4.test('ABcd12_'))  // true

    // 3. [^a-z] 取反符
    const reg5 = /^[^a-z]$/
    console.log(reg5.test('a'))  // false 
    console.log(reg5.test('A'))  // true
    console.log(reg5.test(8))  // true

  </script>
</body>

2.4字符类

某些常见模式的简写方式，区分字母和数字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HgLLk82d-1680687737285)(assets/1676080353637.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6gJFtLTp-1680687737286)(assets/1676080372325.png)]

2.5替换和修饰符

语法
/表达式/修饰符修饰符为i 或者g

replace 替换方法，可以完成字符的替换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ba568dny-1680687737286)(assets/1676080437160.png)]


修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果

  <script>
    // 替换和修饰符
    const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
    // 1. 替换  replace  需求：把前端替换为 web
    // 1.1 replace 返回值是替换完毕的字符串
    // const strEnd = str.replace(/前端/, 'web') 只能替换一个

    // 2. 修饰符 g 全部替换
    const strEnd = str.replace(/前端/g, 'web')
    console.log(strEnd) 
  </script>
</body>

2.6 案例替换敏感词

技术

单一的元素抓取可以使用兄弟与父亲节点
对获取的表单内容 replace代替即可

3综合案例—小鲜兔登录注册页面

节流阀的使用

变量flag 的 true与false ，控制一部分代码的是否执行
验证码倒计时点击之后没有结束不能再次点击，结束后点击在再次开启倒计时
将整个节流阀的控制部分放在点击事件的内部

change事件
change 事件内容发生了变化,出现验证，类似失去交焦点

<script>
    const input = document.querySelector('input')
    input.addEventListener('change', function () {
    
    
      console.log(111)
    })
  </script>

兄弟节点的使用
- 如果表单的内容填写错误，直接获取其所在的弟弟节点
- 如果是获取span标签，太多容易出错
判断一个标签里边是否包含一个类

获取到的标签.classList.contains()

if(queren.classList.contains('icon-queren2')){
    
    
         console.log('queren 标签里边包含了icon-queren2 这个类');
        }

两个类直接的切换获取到的标签.classList.toggle()

 const queren = document.querySelector('.icon-queren')
       queren.addEventListener('click',function(){
          queren.classList.toggle('icon-queren2')
       })

适合事件委托的
- 事件委托内部的内容比较干净例如 div > a
- 如果是 div > a >ul > li 则不适合事件委托
tab栏切换

获取多有的大盒子变数大盒子的数组先让所有的元素都隐藏随后让对应的显示即可

// 下边内容的切换，获取大盒子 遍历两个盒子
        const tab_pane = document.querySelectorAll('.tab-pane')
        // console.log(tab_pane);

        for(let i = 0 ;i<tab_pane.length;i++){
            // 隐藏所有盒子
            tab_pane[i].style.display = 'none'

        }
        // 显示点击对应的盒子 （重点）
        tab_pane[e.target.dataset.id].style.display = 'block'

H5表单的新属性
- required 检测控件的内容是否为空
页面跳转问题
- 存在 location.href 但是跳转失败，本页面自己跳转
- 需要清除默认跳转 e.preventDefault()
JS 表单中的控件value 内容为undefined ，查看value 的大小写问题

  localStorage.setItem('userInfo',userinfoname.value)  
  // value 与Value 不同，没有Value那个属性

正则插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQC6nBAG-1680687737287)(assets/1676080548639.png)]

change 事件

给input注册 change 事件，值被修改并且失去焦点后触发

判断是否有类

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h88bOnR1-1680687737288)(assets/1676080618794.png)]

元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false

day06 正则表达式