Web APIs - 正则&阶段案例

Jasmine_j
107 阅读3分钟

Web APIs - 第6天笔记

目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力

  • 正则表达式
  • 综合案例
  • 阶段案例

正则表达式

正则表达式（Regular Expression）是一种字符串匹配的模式（规则）

使用场景：

  • 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
  • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
1676079666366.png

正则基本使用

  1. 定义规则

    const reg =  /表达式/
    • 其中/ /是正则表达式字面量
    • 正则表达式也是对象

  2. 使用正则

    • test()方法 用来判断正则表达式与指定的字符串是否匹配
    • 如果正则表达式与指定的字符串匹配 ，返回true，否则false
    • exec()方法 方法 在一个指定字符串中执行一个搜索匹配
    • 如果匹配成功，exec() 方法返回一个数组，否则返回null
 <script>
        const str = '我在学习前端，希望前端给我工作机会'
        // 1.定义规则
        const reg = /前端/
        // 2.是否匹配符
        console.log(reg.test(str))  //true
        // 3.exec()方法 在一个指定字符串中执行一个搜索匹配
        console.log(reg.exec(str))

    </script>

元字符

  1. 普通字符:
  • 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
  • 普通字符只能够匹配字符串中与它们相同的字符。
  • 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
  1. 元字符(特殊字符）
  • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
  • 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
  • 参考文档：MDN：developer.mozilla.org/zhCN/docs/W…
  • 正则测试工具: tool.oschina.net/regex

边界符

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

1676080081650.png

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

  <script>
 // ^:匹配行首文本 
        console.log(/^哈/.test('哈'))  //true
        console.log(/^哈/.test('哈哈'))  //true
        console.log(/^哈/.test('二哈'))  //flase 
 // $：匹配行尾文本
        console.log(/哈$/.test('哈'))  //true
        console.log(/哈$/.test('二哈'))  //true
        console.log(/哈$/.test('哈二'))  //flase 
 //  ^ 和 $ 在一起，表示是精确匹配
        console.log(/^哈$/.test('哈'))  //true
        console.log(/^哈$/.test('哈哈'))  //true
        console.log(/^哈$/.test('二哈'))  //flase 
  </script>

量词

量词用来设定某个模式重复次数

1676080185383.png

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

<body>
  <script>
 // * 类似>=0次
        console.log(/^哈*$/.test(''))  //true
        console.log(/^哈*$/.test('哈'))  //true
        console.log(/^哈*$/.test('哈哈'))  //true
        console.log(/^哈*$/.test('二哈'))  //flase 
 // + 类似>=1次
        console.log(/^哈+$/.test(''))  //flase
        console.log(/^哈+$/.test('哈'))  //true
        console.log(/^哈+$/.test('哈哈'))  //true
        console.log(/^哈+$/.test('二哈'))  //flase 
// ? 类似 0||1
        console.log(/^哈?$/.test(''))  //true
        console.log(/^哈?$/.test('哈'))  //true
        console.log(/^哈?$/.test('哈哈'))  //flase 
        console.log(/^哈?$/.test('二哈'))  //flase 
// {n} 重复n次
        console.log(/^哈{4}$/.test('哈'))  //flase
        console.log(/^哈{4}$/.test('哈哈哈'))  //flase
        console.log(/^哈{4}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4}$/.test('哈哈哈哈哈'))  //flase 
// {n,} 重复n次 或 更多次
        console.log(/^哈{4,}$/.test('哈'))  //flase
        console.log(/^哈{4,}$/.test('哈哈哈'))  //flase
        console.log(/^哈{4,}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4,}$/.test('哈哈哈哈哈'))  //flase 
// {n,m} 重复n~m次,逗号左右两侧千万不能有空格 
        console.log(/^哈{4,6}$/.test('哈'))  //flase 
        console.log(/^哈{4,6}$/.test('哈哈哈'))  //flase
        console.log(/^哈{4,6}$/.test('哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈'))  //true
        console.log(/^哈{4,6}$/.test('哈哈哈哈哈哈哈'))  //flase
  </script>

范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

1676080296168.png

  <script>
// 字符类[abc]  只选1个
        console.log(/^[abc]$/.test('a'))  // true
        console.log(/^[abc]$/.test('b'))  // true
        console.log(/^[abc]$/.test('c'))  // true
        console.log(/^[abc]$/.test('ab'))  // false
        console.log(/^[abc]{2}$/.test('ab'))  // true
// 字符类[a-z]  只选1个
        console.log(/^[A-Z]$/.test('p'))  // false
        console.log(/^[A-Z]$/.test('P'))  // true
// 字符类[0-9]  只选1个
        console.log(/^[0-9]$/.test(2))  // true
// [a-zA-Z] 表示大小写都可以 只选1个
        console.log(/^[a-zA-Z0-9]$/.test(2))  // true
        console.log(/^[a-zA-Z0-9]$/.test('p'))  // true
        console.log(/^[a-zA-Z0-9]$/.test('P'))  // true
// 3. [^a-z] 取反符
        const reg5 = /^[^a-z]$/
        console.log(reg5.test('a'))  // false 
        console.log(reg5.test('A'))  // true
        console.log(reg5.test(8))  // true
  </script>

字符类

某些常见模式的简写方式，区分字母和数字

1676080353637.png

1676080372325.png

案例-用户名验证案例

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

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

案例-昵称案例

需求：要求用户只能输入中文

  1. 首先准备好这种正则表达式模式 /^[\u4e00-\u9fa5]{2,8}$/
  2. 当表单失去焦点就开始验证.
  3. 如果符合正则规范, 则让后面的span标签添加 right 类.
  4. 如果不符合正则规范, 则让后面的span标签添加 wrong 类.

替换和修饰符

replace 替换方法，可以完成字符的替换

1676080437160.png

  <script>
        const str = 'java是一门编程语言， 学完JAVA工资很高'
        // const re = str.replace(/java|JAVA/g, '前端')
        const re = str.replace(/java/ig, '前端')
        console.log(re)  // 前端是一门编程语言， 学完前端工资很高
  </script>

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

  • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
  • g 是单词 global 的缩写，匹配所有满足正则表达式的结果
  <script>
        console.log(/^java$/.test('java'))
        console.log(/^java$/i.test('JAVA'))
  </script>

正则插件

1676080548639.png

change 事件

给input注册 change 事件，值被修改并且失去焦点后触发

<body>
  <!-- <input type="text"> -->
  <input type="checkbox" name="" id="">

  <script>
    // change 事件 内容发生了变化
    const input = document.querySelector('input')
    input.addEventListener('change', function () {
      console.log(111)
    })
  </script>
</body>

判断是否有类

  <script>
    //添加类名
      div.classList.add('类名')
   //删除类名
      div.classList.remove('类名')
   //切换类名
      div.classList.toggle('类名')
   //判断是否包含某个类名，有返回true ，没有返回flase
      div.classList.congtains('类名')
    
  </script>

元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false

案例-注册和登录页面

注册截图.png 登录页面.png
avatar
文章
阅读
粉丝