JS——webAPIs（6）

一、知识点

1.正则表达式的使用

    //正则表达式：用于匹配字符串中字符组合的模式
    const str = '学习前端'
    //定义规则
    const reg = /前端/
    //进行查找-两个方法
    //用于判断是否有符合规则的字符串，返回布尔值
    console.log(reg.test(str));
    //用于检索符合规则的字符串，返回数组，否则为null
    console.log(reg.exec(str));

2.元字符-边界符

3.元字符-量词

 4.元字符-字符类

 

5.修饰符

    const re = str.replace(/前端/ig,'java')
    console.log(re);

二、综合案例

1.验证用户名是否正确

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

2. 过滤敏感词

  <script>
    const tx = document.querySelector('textarea')
    const btn = document.querySelector('button')
    const div = document.querySelector('div')
    btn.addEventListener('click',function(){
      div.innerHTML = tx.value.replace(/敏感词/g,'**')
      tx.value = ''
    })
  </script>

3. 注册页面

  <script>
    // 立即执行函数
    (function(){
      // 发送短信验证码模块
      const code = document.querySelector('.code')
      // 点击事件
      code.addEventListener('click',function(){
        // 倒计时5s,点击完毕立马触发
        let i = 5
        code.innerHTML = `0${i}秒后重新获取`
        let timeId = setInterval(function(){
          i--
          code.innerHTML = `0${i}秒后重新获取`
          if (i === 0){
            clearInterval(timeId)
            // 重新获取
            code.innerHTML = '重新获取'
          }
        }, 1000);
      })
    })()

    // 用户名验证模块
    // 获取元素
    const username = document.querySelector('[name=username]')
    // 使用change事件：值发生变化就会触发
    username.addEventListener('change',verifyName)
    // 封装函数
    function verifyName(){
      const span = username.nextElementSibling
      // 定义规则
      const reg = /^[a-zA-Z0-9-_]{6,10}$/
      // 验证
      if (!reg.test(username.value)){
        span.innerHTML = '输入不合法，请输入6-10位'
        // 中断程序
        return false
      }
      // 合法，清空span
      span.innerHTML = ''
      return true
    }
    
    // 手机号验证模块
    const phone = document.querySelector('[name=phone]')
    phone.addEventListener('change',verifyPhone)
    function verifyPhone(){
      const span = phone.nextElementSibling
      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}$/
      if (!reg.test(phone.value)){
        span.innerHTML = '输入不合法，请输入正确的11位手机号码'
        return false
      }
      span.innerHTML = ''
      return true
    }

    // 验证码验证模块
    const code = document.querySelector('[name=code]')
    code.addEventListener('change',verifyCode)
    function verifyCode(){
      const span = code.nextElementSibling
      const reg = /^\d{6}$/
      if (!reg.test(code.value)){
        span.innerHTML = '输入不合法，6位数字'
        return false
      }
      span.innerHTML = ''
      return true
    }

    // 密码验证模块
    const password = document.querySelector('[name=password]')
    password.addEventListener('change',verifyPassword)
    function verifyPassword(){
      const span = password.nextElementSibling
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      if (!reg.test(password.value)){
        span.innerHTML = '输入不合法，6~20位数字字母符号组成'
        return false
      }
      span.innerHTML = ''
      return true
    }

    // 密码再次验证模块
    const confirm = document.querySelector('[name=confirm]')
    confirm.addEventListener('change',verifyConfirm)
    function verifyConfirm(){
      const span = confirm.nextElementSibling
      // 判断
      if (confirm.value !== password.value) {
        span.innerHTML = '两次密码输入不一致'
        return false
      }
      span.innerHTML = ''
      return true
    }

    // 点击已阅读并同意模块
    const queren = document.querySelector('.icon-queren')
    queren.addEventListener('click',function(){
      //切换类，原来有就删掉，原来没有就添加
      this.classList.toggle('icon-queren2')
    })

    // 提交模块
    const form = document.querySelector('form')
    form.addEventListener('submit',function(e){
      // 判断是否勾选了已同意
      if (!queren.classList.contains('icon-queren2')){
        alert('请勾选同意协议')
        //阻止提交
        e.preventDefault()
      }
      // 依次判断上面的每个框框是否通过验证
      // 只要有一个没通过就提交失败(阻止提交)
      if (!verifyName()) e.preventDefault()
      if (!verifyPhone()) e.preventDefault()
      if (!verifyCode()) e.preventDefault()
      if (!verifyPassword()) e.preventDefault()
      if (!verifyConfirm()) e.preventDefault()
    })
  </script>

4.登录页面

  <script>
    // 事件委托 tab栏切换
    const nav = document.querySelector('.tab-nav')
    const pane = document.querySelectorAll('.tab-pane')
    nav.addEventListener('click',function(e){
      if(e.target.tagName === 'A'){
        // 取消上一个active
        nav.querySelector('.active').classList.remove('active')
        // 当前添加active
        e.target.classList.add('active')
        // 循环，让所有pane隐藏
        for (let i = 0;i<pane.length;i++){
          pane[i].style.display = 'none'
        }
        // 让对应序号的pane显示
        pane[e.target.dataset.id].style.display = 'block'
      }
    })

    // 点击提交模块
    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('xtx-uname',username.value)
      // 跳转到首页
      location.href = './index.html'
    })
  </script>

 5.首页页面

  <script>
    const li1 = document.querySelector('.xtx_navs li:first-child')
    const li2 = li1.nextElementSibling
    // 渲染函数
    function render(){
      // 读取本地存储数据
      const uname = localStorage.getItem('xtx-uname')
      if (uname){
        li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>`
        li2.innerHTML = '<a href="javascript:;">退出登录</a>'
      }
      else {
        li1.innerHTML = '<a href="./login.html">请先登录</a>'
        li2.innerHTML = '<a href="./register.html">免费注册</a>'
      }
    }
    // 渲染
    render()

    // 点击退出模块
    li2.addEventListener('click',function(){
      // 删除本地存储数据
      localStorage.removeItem('xtx-uname')
      // 重新渲染
      render()
    })
  </script>