JavaScript Web API入门day6

1.正则表达式

[1.1 什么是正则表达式](#1.1 什么是正则表达式)

[1.2 语法](#1.2 语法)

[1.3 元字符](#1.3 元字符)

[1.3.1 边界符](#1.3.1 边界符)

[1.3.2 量词](#1.3.2 量词)

[1.3.3 字符类](#1.3.3 字符类)

[1.4 修饰符](#1.4 修饰符)

[1.5 案例](#1.5 案例)

2.综合案例

[2.1 小兔鲜页面注册](#2.1 小兔鲜页面注册)

[2.2 小兔鲜登录页面](#2.2 小兔鲜登录页面)

[2.3 小兔鲜首页页面](#2.3 小兔鲜首页页面)

1.正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
在 JavaScript中，正则表达式也是对象。
正则表达式在 JavaScript中的使用场景：

Ø 表单验证（匹配）
Ø 过滤敏感词（替换）
Ø 字符串中提取我们想要的部分（提取）

1.2 语法

正则同样道理，分为两步：

1. 定义规则
1. 查找

1. 定义正则表达式语法：

其中 / / 是正则表达式字面量
2.判断是否有符合规则的字符串：

test() 方法用来查看正则表达式与指定的字符串是否匹配
例如：

3.检索（查找）符合规则的字符串：

exec() 方法在一个指定字符串中执行一个搜索匹配
比如：

注意事项：
正则表达式检测查找 test方法和exec方法有什么区别？

Ø test方法用于判断是否有符合规则的字符串，返回的是布尔值找到返回true，否则false
Ø exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为 null

1.3 元字符

目标：能说出什么是元字符以及它的好处
普通字符:
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
Ø 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm.....
Ø 但是换成元字符写法： [a-z]
优势：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
元字符分类：

Ø 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
Ø 量词（表示重复次数）
Ø 字符类（比如 \d 表示 0~9）

1.3.1 边界符

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

注意：如果 ^ 和 $ 在一起，表示必须是精确匹配。

1.3.2 量词

量词用来设定某个模式出现的次数

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

1.3.3 字符类

(1) [ ] 匹配字符集合
后面的字符串只要包含 abc 中任意 一个字符 ，都返回 true 。

(2) [ ] 里面加上 - 连字符
使用连字符 - 表示一个范围

比如：

Ø [a-z] 表示 a 到 z 26个英文字母都可以
Ø [a-zA-Z] 表示大小写都可以
Ø [0-9] 表示 0~9 的数字都可以

(3) [ ] 里面加上 ^ 取反符号
比如：

Ø [^a-z] 匹配除了小写字母以外的字符
Ø 注意要写到中括号里面

(4) [ ]里面加 . 匹配除换行符之外的任何单个字符

用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
分析：

①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
②：当表单失去焦点就开始验证.
③：如果符合正则规范, 则让后面的span标签添加 right 类.
④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.

代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 250px;
            height: 30px;
            vertical-align: middle;
            line-height: 30px;
            padding-left: 15px;
        }

        .error {
            color: red;
            background: url(./images/error1.png) no-repeat left center;
        }

        .right {
            color: green;
            background: url(./images/right.png) no-repeat left center;
        }
    </style>
</head>

<body>
    <input type="text">
    <span></span>
    <script>
        const input = document.querySelector('input')
        const span = input.nextElementSibling
        const reg = /^[a-zA-Z0-9-_]{6,16}$/
        input.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                span.innerHTML = '输入正确'
                span.className = 'right'
            } else {
                span.innerHTML = '请输入6到16个字符的英文数字下划线'
                span.className = 'error'
            }
        })
    </script>
</body>

</html>

(5). 预定义，指的是某些常见模式的简写方式。

1.4 修饰符

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

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

注意事项：如果没有加g，一般都是只匹配第一个满足表达式的结果。

替换 replace 替换
语法：

1.5 案例

过滤敏感字
需求：要求用户不能输入敏感字，比如，pink老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g
代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>
  <div></div>
  <script>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click', function () {
      // console.log(tx.value)
      div.innerHTML = tx.value.replace(/激情|基情/g, '**')
      tx.value = ''
    })
  </script>
</body>

</html>

2.综合案例

2.1 小兔鲜页面注册

效果图：

分析业务模块：
①：发送验证码模块

用户点击之后，显示 05秒后重新获取
时间到了，自动改为重新获取
②：各个表单验证模块
用户名验证（注意封装函数 verifyxxx） , 失去焦点触发这个函数
- 正则 /^[a-zA-Z0-9-_]{6,10}$/
- 如果不符合要求，则出现提示信息并 return false 中断程序
- 否则则返回return true
- 之所以返回布尔值，是为了最后的提交按钮做准备侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果）
手机号验证
- 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/ ，其余同上
验证码验证
*
正则 /^\d{6}$/ ，其余同上
密码验证
- 正则 /^[a-zA-Z0-9-_]{6,20}$/ ，其余同上
再次密码验证
- 如果本次密码不等于上面输入的密码则返回错误信息，其余同上
我同意模块
添加类 .icon-queren2 则是默认选中样式可以使用 toggle切换类
③：勾选已经阅读同意模块
④：下一步验证全部模块，只要上面有一个input验证不通过就不同意提交
使用 submit 提交事件
如果没有勾选同意协议，则提示需要勾选
classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
如果上面input表单只要有模块，返回的是 false 则阻止提交

代码：

javascript 复制代码

<script>
    /* 1.发送验证码 */
    //1.1获取发送验证码
    const a = document.querySelector('.code')

    //定义一个变量，防止获取验证码时重复点击出现的bug
    let flat = true

    //1.2注册点击事件
    a.addEventListener('click', function () {
      if (flat) {
        //要先变为false
        flat = false
        let i = 5
        //保证不会延迟一秒
        a.innerHTML = `0${i}秒后重新获取`
        //开启计时器
        let num = setInterval(function () {
          i--
          a.innerHTML = `0${i}秒后重新获取`

          if (i === 0) {
            //关闭计时器
            clearInterval(num)
            //重新获取验证码
            a.innerHTML = '重新获取'
            //倒计时结束，才允许给重新获取
            flat = true
          }
        }, 1000)
      }

    })

    /* 2.用户名验证 */
    //2.1 获取对象
    const username = document.querySelector('[name=username]')

    //2.2 注册变化事件
    username.addEventListener('change', verifyName)

    //2.3 封装函数
    function verifyName() {
      //正则
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      const span = username.nextElementSibling
      //不合法
      if (!reg.test(username.value)) {
        //提示用户
        span.innerHTML = '输入不合法,请输入6~10位'
        return false
      }

      //合法
      span.innerHTML = ''
      return true
    }


    /* 3.手机号码验证 */
    //3.1 获取对象
    const phone = document.querySelector('[name=phone]')

    //3.2 注册变化事件
    phone.addEventListener('change', verifyPhone)

    //3.3 封装函数
    function verifyPhone() {
      //正则
      const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
      const span = phone.nextElementSibling
      //不合法
      if (!reg.test(phone.value)) {
        //提示用户
        span.innerHTML = '输入不合法,请输入正确的11位手机号码'
        return false
      }

      //合法
      span.innerHTML = ''
      return true
    }



    /* 4.验证码验证 */
    //4.1 获取对象
    const code = document.querySelector('[name=code]')

    //4.2 注册变化事件
    code.addEventListener('change', verifyCode)

    //4.3 封装函数
    function verifyCode() {
      //正则
      const reg = /^\d{6}$/
      const span = code.nextElementSibling
      //不合法
      if (!reg.test(code.value)) {
        //提示用户
        span.innerHTML = '请输入6位数字的验证码'
        return false
      }

      //合法
      span.innerHTML = ''
      return true
    }



    /* 5.密码验证 */
    //5.1 获取对象
    const password = document.querySelector('[name=password]')

    //5.2 密码验证变化
    password.addEventListener('change', verifyPassword)

    //5.3 封装函数
    function verifyPassword() {
      //正则
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      const span = password.nextElementSibling
      //不合法
      if (!reg.test(password.value)) {
        //提示用户
        span.innerHTML = '请输入6~20位的密码'
        return false
      }

      //合法
      span.innerHTML = ''
      return true
    }


    /* 6.密码再次验证 */
    //6.1 获取对象
    const confirm = document.querySelector('[name=confirm]')

    //6.2 注册变化事件
    confirm.addEventListener('change', verifyConfirm)

    //6.3 封装函数
    function verifyConfirm() {
      const span = confirm.nextElementSibling
      //不合法
      if (confirm.value !== password.value) {
        //提示用户
        span.innerHTML = '如果本次密码不等于上面输入的密码'
        return false
      }

      //合法
      span.innerHTML = ''
      return true
    }



    /* 6.我同意模块 */
    // 6.1 获取对象
    const queren = document.querySelector('.icon-queren')
    queren.addEventListener('click', function () {
      //切换类     有的类就删除，没有就添加
      this.classList.toggle('icon-queren2')
    })


    /* 7.提交模块 */
    // 7.1 获取对象
    const form = document.querySelector('form')
    // 7.2 点击事件
    form.addEventListener('submit', function (e) {
      //如果没有同意则给予提示信息
      if (!queren.classList.contains('icon-queren2')) {
        alert('请先同意协议')
        //取消自动提交
        e.preventDefault()
      }

      // 如果这样写，直接提交会显示信息不全
      // // 依次判断表单是否合法,不合法就阻止页面提交表单信息
      // if (!verifyName() || !verifyPhone() || !verifyCode() || !verifyPassword() || !verifyConfirm()) {
      //   // 阻止页面提交s
      //   e.preventDefault()
      // }

      // 这样写，可以看到全部提示信息
      if (!verifyName()) e.preventDefault()
      if (!verifyPhone()) e.preventDefault()
      if (!verifyCode()) e.preventDefault()
      if (!verifyPassword()) e.preventDefault()
      if (!verifyConfirm()) e.preventDefault()
    })
  </script>

2.2 小兔鲜登录页面

需求①： tab切换

需求②：点击登录可以跳转页面

Ø 先阻止默认行为
Ø 如果没有勾选同意，则提示要勾选
Ø required 属性不能为空
Ø 假设登录成功
把用户名记录到本地存储中
同时跳转到首页 location.href

效果图：

代码：

javascript 复制代码

<script>
    /* 1.点击下划线显示和切换显示 */
    // 获取对象
    const tab_nav = document.querySelector('.tab-nav')
    const pane = document.querySelectorAll('.tab-pane')

    // 注册点击事件
    tab_nav.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // console.log(11);
        // 排他思想
        document.querySelector('.tab-nav .active').classList.remove('active')
        e.target.classList.add('active')

        //遍历pane(切换图片)
        for (let i = 0; i < pane.length; i++) {
          // 都先取消选择
          pane[i].style.display = 'none'
        }

        //再根据当前选择的对象显示信息
        pane[e.target.dataset.id].style = 'block'
      }
    })

    /* 2.提交事件 */
    // 获取对象
    const form = document.querySelector('form')
    const agree = document.querySelector('[name=agree]')
    const username = document.querySelector('[name=username]')


    // 注册点击事件
    form.addEventListener('submit', function (e) {
      // 阻止页面自动提交
      e.preventDefault()

      // 只有同意协议，才允许跳转页面
      if (!agree.checked) {
        return alert('请先同意协议')
      }

      // 添加本地存储
      localStorage.setItem('username', username.value)
      //页面跳转
      location.href = './index.html'
    })

  </script>

2.3 小兔鲜首页页面

需求：

1. 从登录页面跳转过来之后，自动显示用户名
1. 如果点击退出，则不显示用户名

步骤：
最好写个 渲染函数 ，因为一会的退出还需要用到
①：如果本地存储有记录的用户名，读取本地存储数据
需要把用户名写到第一个li里面
格式： <a href="javascript:;"><i class="iconfont icon-user"> pink老师</i></a>
因为登录了，所以第二个里面的文字变为，退出登录
格式： <a href="javascript:;">退出登录</a>
②：如果本地存储没有数据，则复原为默认的结构
③：点击退出登录
删除本地存储对应的用户名数据
重新调用渲染函数即可

效果图：

代码：

javascript 复制代码

<script>

    /* 1.显示用户名 */
    // 获取对象
    const li1 = document.querySelector('.xtx_navs li:first-child')
    const li2 = li1.nextElementSibling

    //渲染函数
    function render() {

      const username = localStorage.getItem('username')

      //获取本地存储的用户名
      if (username) {
        li1.innerHTML = `
        <a href="javascript:;"><i class="iconfont icon-user">${username} </i></a>`

        li2.innerHTML = `<a href="javascript:;">退出登录</a>`
      } else {
        li1.innerHTML = '<a href="./login.html">请先登录</a>'
        li2.innerHTML = '<a href="./register.html">免费注册</a>'

      }

    }
    //调用函数，渲染页面
    render()

    /* 2.点击退出登录 */
    //2.1删除本地存储对应的用户名数据
    li2.addEventListener('click', function () {
      localStorage.removeItem('username')
      // console.log(11)

      //2.2重新调用渲染函数即可
      render()
    })


  </script>