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>