Web APIs_day06

晚风的街

已于 2024-09-11 17:35:08 修改

阅读量351

点赞数 4

文章标签：前端 javascript

于 2024-09-11 17:33:26 首次发布

本文链接：https://blog.csdn.net/m0_74153968/article/details/141361302

版权

正则表达式

介绍

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

作用：表单验证（匹配）、过滤敏感词（替换）、字符串中提取想要的部分（提取）

语法

（1）定义规则

（2）查找

判断是否有符合规则的字符串：

test() 方法用来查看正则表达式与指定的字符串是否匹配，如果正则表达式与指定的字符串匹配，返回true，否则false。

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

exec() 方法在一个指定字符串中执行一个搜索匹配，如果匹配成功，exec() 方法返回一个数组，否则返回null。

<script>
    const str = 'IT培训,前端开发培训,IT培训课程,Java培训'
    //定义正则
    const reg = /前端/  //  /   / 是正则表达式字面量
    //检测方法
    console.log(reg.test(str));
    console.log(reg.exec(str));
  </script>

元字符

元字符是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。

边界符

边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾），用来提示字符所处的位置，主要有两个字符。

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

量词

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

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

字符类

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

（2）[ ] 里面加上 - 连字符：使用连字符 - 表示一个范围，例如[a-zA-Z0-9] 表示大小写和数字都可以。

（3）[ ] 里面加上 ^ 取反符号：[^a-z] 匹配除了小写字母以外的字符，注意要写到中括号里面。

（4）. 匹配除换行符之外的任何单个字符

案例用户名验证

<body>
  <input type="text">
  <span></span>
  <script>
    //定义正则
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const input = document.querySelector('input')
    const span = document.querySelector('span')
    input.addEventListener('blur', function () {
      if (reg.test(this.value)) {
        span.innerHTML = '输入正确'
        //className不覆盖类名
        span.className = 'right'
      }
      else {
        span.innerHTML = '输入不正确'
        span.className = 'error'
      }
    })
  </script>
</body>

字符类

预定义：指的是某些常见模式的简写方式。

//日期格式  
^\d{4}-\d{1,2}-\d{1,2}

修饰符

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

语法：/表达式/修饰符

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

替换 replace 替换：字符串.replace(/正则表达式/,'替换的文本')

案例过滤敏感字

<body>
  <textarea name="" id=""></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 () {
      //替换敏感词
      div.innerHTML = tx.value.replace(/激情|基情/, '**')
      tx.value = ''
    })
  </script>
</body>

综合案例

小兔鲜页面注册

<script>
    (function () {
      //发送短信验证码模块
      const code = document.querySelector('.code')
      let flag = true   //节流阀    控制变量（防止再次点击计时器时，计时器出现bug)
      code.addEventListener('click', function () {
        if (flag) {
          flag = false  //防止再点击
          let timer = 60
          //点击完毕后立马执行
          code.innerHTML = `${timer}秒后重新获取`
          let timerId = setInterval(function () {
            timer--
            code.innerHTML = `${timer}秒后重新获取`
            if (timer === 0) {
              clearInterval(timerId)
              code.innerHTML = '重新获取'
              flag = true //计时结束后，可以重新点击。
            }
          }, 1000)
        }
      })

      //用户名验证
      const username = document.querySelector('[name=username]') //属性值获取
      //change事件  内容改变的时候
      username.addEventListener('change', verifyName)
      //封装函数
      function verifyName() {
        const span = username.nextElementSibling //这里不用document获取是因为span有很多个，我们只需要username下一个span。
        //定义规则
        const reg = /^[a-zA-Z0-9-_]{6,10}$/
        if (!reg.test(username.value)) {
          span.innerText = '输入不合法,请输入6-10位'
          return flase
        }
        //合法 清空span
        span.innerText = ''
        return true
      }

      //手机号验证
      const phone = document.querySelector('[name=phone]') //属性值获取
      //change事件  内容改变的时候
      phone.addEventListener('change', verifyPhone)
      //封装函数
      function verifyPhone() {
        const span = phone.nextElementSibling //这里不用document获取是因为span有很多个，我们只需要username下一个span。
        //定义规则
        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.innerText = '输入不合法,请输入正确的11位手机号'
          return flase
        }
        //合法 清空span
        span.innerText = ''
        return true
      }
    })();

    //验证码验证
    const codeInput = document.querySelector('[name=code]') //属性值获取
    //change事件  内容改变的时候
    codeInput.addEventListener('change', verifyCode)
    //封装函数
    function verifyCode() {
      const span = codeInput.nextElementSibling //这里不用document获取是因为span有很多个，我们只需要username下一个span。
      //定义规则
      const reg = /^\d{6}$/
      if (!reg.test(codeInput.value)) {
        span.innerText = '输入不合法'
        return flase
      }
      //合法 清空span
      span.innerText = ''
      return true
    }

    //密码验证
    const password = document.querySelector('[name=password]') //属性值获取
    //change事件  内容改变的时候
    password.addEventListener('change', verifyPassword)
    //封装函数
    function verifyPassword() {
      const span = password.nextElementSibling //这里不用document获取是因为span有很多个，我们只需要username下一个span。
      //定义规则
      const reg = /^[a-zA-Z0-9-_]{6,20}$/
      if (!reg.test(password.value)) {
        span.innerText = '输入不合法'
        return flase
      }
      //合法 清空span
      span.innerText = ''
      return true
    }

    //再次验证密码
    const confirm = document.querySelector('[name=confirm]') //属性值获取
    //change事件  内容改变的时候
    confirm.addEventListener('change', verifyConfirm)
    //封装函数
    function verifyConfirm() {
      const span = confirm.nextElementSibling //这里不用document获取是因为span有很多个，我们只需要username下一个span。
      if (confirm.value !== password.value) {
        span.innerText = '与上述密码不一致'
        return flase
      }
      //合法 清空span
      span.innerText = ''
      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>