JavaScript Web API入门day6

1.正则表达式

1.1 什么是正则表达式

1.2 语法

1.3 元字符

1.3.1 边界符

1.3.2 量词

1.3.3 字符类

1.4 修饰符

1.5 案例

2.综合案例

2.1 小兔鲜页面注册

2.2 小兔鲜登录页面

2.3 小兔鲜首页页面

1.正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。

在 JavaScript中，正则表达式也是对象。

正则表达式在 JavaScript中的使用场景：

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

1.2 语法

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

1. 定义规则
2. 查找

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 类.

代码：

<!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

代码：

<!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 则阻止提交

代码：

<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

效果图：

代码：

<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. 从登录页面跳转过来之后，自动显示用户名
2. 如果点击退出，则不显示用户名

步骤：

最好写个 渲染函数 ，因为一会的退出还需要用到

①：如果本地存储有记录的用户名，读取本地存储数据

需要把用户名写到第一个li里面

格式： <a href="javascript:;"><i class="iconfont icon-user"> pink老师</i></a>

因为登录了，所以第二个里面的文字变为，退出登录

格式： <a href="javascript:;">退出登录</a>

②：如果本地存储没有数据，则复原为默认的结构

③：点击退出登录

删除本地存储对应的用户名数据

重新调用渲染函数即可

效果图：

代码：

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