前端开发必备：掌握正则表达式，轻松应对复杂的表单验证

news2024/10/7 12:19:57

前言

在前端开发中，经常需要处理 URL 地址、校验手机号合法性、提取域名等。正则表达式是一种常用的工具。通过使用正则表达式，我们可以对用户输入进行有效的验证，确保数据的合法性和完整性。本文将介绍一些常见的正则表达式，帮助你在开发中处理匹配的关键信息。

一、正则表达式的常用用法

1.1 模式匹配（match 方法）

在这个示例中，我们使用 match 方法来执行模式匹配操作。用户在文本输入框中输入的文本将与正则表达式 /abc/ 进行匹配，匹配结果将显示在页面上。

<template>
  <div>
    <input type="text" v-model="inputText" placeholder="输入文本">
    <button @click="matchPattern">匹配</button>
    <p>匹配结果: {{ matchResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      matchResult: "",
    };
  },
  methods: {
    matchPattern() {
      const pattern = /abc/; // 匹配包含子字符串 "abc" 的任何字符串
      this.matchResult = this.inputText.match(pattern);
    },
  },
};
</script>

实现效果

在这里插入图片描述

1.2 替换操作（replace 方法）

在这个示例中，我们使用 replace 方法来执行替换操作。用户在文本输入框中输入的文本中的匹配项将被替换为指定的字符串。在示例中，我们将正则表达式 /abc/ 匹配到的文本替换为 xyz。

<template>
  <div>
    <input type="text" v-model="inputText" placeholder="输入文本">
    <button @click="replacePattern">替换</button>
    <p>替换结果: {{ replaceResult }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      replaceResult: "",
    };
  },
  methods: {
    replacePattern() {
      const pattern = /abc/; // 替换包含子字符串 "abc" 的任何字符串
      this.replaceResult = this.inputText.replace(pattern, "xyz");
    },
  },
};
</script>

实现效果

在这里插入图片描述

1.3 分割和分组（split 方法）

在这个示例中，我们使用 split 方法来执行分割操作。用户在文本输入框中输入的文本将根据正则表达式 /\s+/ 进行分割，分割结果将以列表形式显示在页面上。

<template>
  <div>
    <input type="text" v-model="inputText" placeholder="输入文本">
    <button @click="splitText">分割</button>
    <ul>
      <li v-for="item in splitResult" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      splitResult: [],
    };
  },
  methods: {
    splitText() {
      const pattern = /\s+/; // 匹配一个或多个连续的空白字符
      this.splitResult = this.inputText.split(pattern);
    },
  },
};
</script>

实现效果

在这里插入图片描述

1.4 验证输入（test 方法）

在这个示例中，我们使用 test 方法来执行验证操作。用户在文本输入框中输入的文本将与正则表达式 /^\d{4}$/ 进行匹配，如果匹配成功，则输入被视为有效，否则被视为无效。

<template>
  <div>
    <input type="text" v-model="inputText" placeholder="输入文本">
    <button @click="validateInput">验证</button>
    <p v-if="isValid">输入有效</p>
    <p v-else>输入无效</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      isValid: false,
    };
  },
  methods: {
    validateInput() {
      const pattern = /^\d{4}$/; // 确保一个字符串由四个数字字符组成，且没有其他额外的字符。例如，可以匹配 "1234" 或 "5278"，但不匹配 "12" 或 "12345"。
      this.isValid = pattern.test(this.inputText);
    },
  },
};
</script>

实现效果

在这里插入图片描述

1.5 数据搜索（search 方法）

在这个示例中，我们使用 search() 方法来搜索输入文本中是否包含指定的正则表达式模式。如果找到匹配，则将匹配的字符串添加到 matches 数组中；否则，将其设置为空数组。请注意，search() 方法返回匹配的字符串的起始位置，而不是匹配的字符串本身。因此，我们需要使用 slice() 方法来获取匹配的字符串。

<template>
  <div>
    <input type="text" v-model="inputText">
    <button @click="searchUsingRegex">搜索</button>
    <div v-if="matches.length > 0">
      <p>匹配到的单词：</p>
      <ul>
        <li v-for="match in matches" :key="match">{{ match }}</li>
      </ul>
    </div>
    <div v-else>
      <p>没有匹配到单词。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      matches: [],
    };
  },
  methods: {
    searchUsingRegex() {
      const regex = /^p\w+/; // 匹配以字母 "p" 开头，后面跟着一个或多个字母、数字或下划线的字符串
      const match = this.inputText.search(regex);
      if (match !== -1) {
        this.matches = [this.inputText.slice(match)];
      } else {
        this.matches = [];
      }
    },
  },
};
</script>

实现效果

在这里插入图片描述

1.6 数据提取（exec 方法）

在这个示例中，我们使用正则表达式 /\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}\\b/g 来匹配邮箱地址。然后，我们使用 exec() 方法来提取输入文本中的所有匹配项。

<template>
  <div>
    <input type="text" v-model="inputText">
    <button @click="extractEmails">提取邮箱</button>
    <div v-if="emails.length > 0">
      <p>提取到的邮箱地址：</p>
      <ul>
        <li v-for="email in emails" :key="email">{{ email }}</li>
      </ul>
    </div>
    <div v-else>
      <p>没有找到邮箱地址。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: "",
      emails: [],
    };
  },
  methods: {
    extractEmails() {
      const regex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}\b/g; // 匹配合法的邮箱地址
      let match;
      this.emails = [];
      while ((match = regex.exec(this.inputText)) !== null) {
        this.emails.push(match[0]);
      }
    },
  },
};
</script>

实现效果

在这里插入图片描述

二、常用正则表达式修饰符和表达模式

2.1 修饰符可以在全局搜索中不区分大小写

修饰符解释
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
m执行多行匹配。

2.2 方括号用于查找某个范围内的字符

表达式解释
[abc]查找方括号之间的任何字符。
[0-9]查找任何从 0 至 9 的数字。
(xy)

2.3 元字符是拥有特殊含义的字符

元字符解释
\d查找数字。
\s查找空白字符。
\b匹配单词边界。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。
\B匹配非单词边界。‘er\B’ 能匹配 “verb” 中的 ‘er’，但不能匹配 “never” 中的 ‘er’。
\D匹配一个非数字字符。等价于 [^0-9]。
\n匹配一个换行符。等价于 \x0a 和 \cJ。
\r匹配一个回车符。等价于 \x0d 和 \cM。
\S匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\w匹配字母、数字、下划线。等价于’[A-Za-z0-9_]'。
\W匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。
\f匹配一个换页符。等价于 \x0c 和 \cL。

2.4 量词

量词解释
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
{n,m}匹配前面的模式至少 n 次且不超过 m 次。
{n,}匹配前面的模式至少 n 次。
{n}匹配前面的模式恰好 n 次。

三、常见的正则表达式

3.1 校验数字的表达式

数字：

^[0-9]*$

n 位的数字：

^\d{n}$

至少 n 位的数字：

^\d{n,}$

m-n 位的数字：

^\d{m,n}$

零和非零开头的数字：

^(0|[1-9][0-9]*)$

非零开头的最多带两位小数的数字：

^([1-9][0-9]*)+(\.[0-9]{1,2})?$

带 1-2 位小数的正数或负数：

^(\-)?\d+(\.\d{1,2})$

正数、负数、和小数：

^(\-|\+)?\d+(\.\d+)?$

有两位小数的正实数：

^[0-9]+(\.[0-9]{2})?$

有 1~3 位小数的正实数：

^[0-9]+(\.[0-9]{1,3})?$

非零的正整数：

^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$

非零的负整数：

^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$

非负整数：

^\d+$ 或 ^[1-9]\d*|0$

非正整数：

^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

非负浮点数：

^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

非正浮点数：

^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

正浮点数：

^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

负浮点数：

^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

浮点数：

^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

3.2 校验字符的表达式

汉字：

^[\u4e00-\u9fa5]{0,}$

英文和数字：

^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

长度为 3-20 的所有字符：

^.{3,20}$

由 26 个英文字母组成的字符串：

^[A-Za-z]+$

由 26 个大写英文字母组成的字符串：

^[A-Z]+$

由 26 个小写英文字母组成的字符串：

^[a-z]+$

由数字和 26 个英文字母组成的字符串：

^[A-Za-z0-9]+$

由数字、26 个英文字母或者下划线组成的字符串：

^\w+$ 或 ^\w{3,20}$

中文、英文、数字包括下划线：

^[\u4E00-\u9FA5A-Za-z0-9_]+$

中文、英文、数字但不包括下划线等符号：

^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

可以输入含有 ^%&',;=?$\" 等特殊字符：

[^%&',;=?$\x22]+

禁止输入含有 ~ 的字符：

[^~]+

3.3 特殊需求表达式

邮箱地址：

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

域名：

[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?

网址：

[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

手机号码：

^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$

电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：

^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

国内电话号码(0511-4405222、021-87888822)：

\d{3}-\d{8}|\d{4}-\d{7}

电话号码正则表达式（支持手机号码，3-4 位区号，7-8 位直播号码，1-4 位分机号）:

((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)

身份证号(15 位、18位数字)，最后一位是校验位，可能为数字或字符 X：

(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)

帐号是否合法(字母开头，允许 5-16 字节，允许字母数字下划线)：

^[a-zA-Z][a-zA-Z0-9_]{4,15}$

密码(以字母开头，长度在 6~18 之间，只能包含字母、数字和下划线)：

^[a-zA-Z]\w{5,17}$

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8-10 之间)：

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$

强密码(必须包含大小写字母和数字的组合，可以使用特殊字符，长度在 8-10 之间)：

^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

日期格式（YYYY-MM-DD）：

^\d{4}-\d{1,2}-\d{1,2}

一年的 12 个月( 01～09 和 1～12)：

^(0?[1-9]|1[0-2])$

一个月的 31 天( 01～09 和 1～31)：

^((0?[1-9])|((1|2)[0-9])|30|31)$

xml 文件：

^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

中文字符的正则表达式：

[\u4e00-\u9fa5]

双字节字符：

[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))

空白行的正则表达式：

\n\s*\r (可以用来删除空白行)

HTML 标记的正则表达式：

<(\S*?)[^>]*>.*?|<.*? /> ( 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)

腾讯 QQ 号：

[1-9][0-9]{4,} (腾讯QQ号从10000开始)

中国邮政编码：

[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

IPv4 地址：

((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1385287.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C#】当重复使用一段代码倒计时时，使用静态类和静态方法，实现简单的this扩展方法

【C#】当重复使用一段代码倒计时时，使用静态类和静态方法，实现简单的this扩展方法

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…
阅读更多...
控制网页的灰度显示

控制网页的灰度显示

1.代码&#xff1a; 普通网页 <style>html {filter: grayscale(100%);}</style> 或是:webkit内核浏览器写法 <style>html {-webkit-filter: grayscale(100%)}</style> 2.说明&#xff1a; grayscale(amount) :进行灰度转换。 amount转换值的大小&…
阅读更多...
C#编程-实现文件输入和输出操作

C#编程-实现文件输入和输出操作

实现文件输入和输出操作 所有程序接受用户的输入、处理输入并且产生输出。所以，所有的编程语言都支持输入和输出操作。例如，您需要为教师开发程序以接受学生的结果信息。您的程序应该将信息保存在硬盘的Result.xls文件中。您可以在程序中使用文件输入和输出操作以接受来自教…
阅读更多...
应急管理蓝皮书 |《应急预案数字化建设现状和发展建议》下篇

应急管理蓝皮书 |《应急预案数字化建设现状和发展建议》下篇

导读 《应急预案数字化建设现状和发展建议》&#xff1a;297-313页 《中国应急管理发展报告》系列蓝皮书由中央党校&#xff08;国家行政学院&#xff09;应急管理培训中心&#xff08;中欧应急管理学院&#xff09;联合社会科学文献出版社研创出版&#xff0c;本着“权威前沿…
阅读更多...
MySQL面试题 | 08.精选MySQL面试题

MySQL面试题 | 08.精选MySQL面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
OpenGauss源码分析-SQL引擎

OpenGauss源码分析-SQL引擎

所讨论文件大多位于src\common\backend\parser文件夹下 总流程 start_xact_command()&#xff1a;开始一个事务。pg_parse_query()&#xff1a;对查询语句进行词法和语法分析&#xff0c;生成一个或者多个初始的语法分析树。进入foreach (parsetree_item, parsetree_list)循环…
阅读更多...
11-适配器模式（Adapter）

11-适配器模式（Adapter）

意图 将一个类的接口转换成客户希望的另一个接口。Adapter模式使得原本由于接口不兼容而不能在一起工作的那些类可以一起工作。 适配器模式属于结构模式。 类适配器模式&#xff08;通过继承的方式实现适配器模式&#xff09; Adapter类&#xff0c;通过继承src类&#xff0…
阅读更多...
逸学Docker【java工程师基础】1.认识docker并且安装

逸学Docker【java工程师基础】1.认识docker并且安装

场景问题 在实际开发过程中我们有这样的场景问题 在开发阶段的环境配置到了其他人项目人员那里就不能运行了&#xff0c;尽管配置规格相同&#xff0c;但是在较多的不同的环境情况下还是可能会有错误。 开发&#xff1a;程序员&#xff1a;你那边可以运行了吗 测试&#xf…
阅读更多...
线程安全2

线程安全2

文章目录 锁的可重入性死锁内存可见性引起的线程安全 锁的可重入性 直观来看这个代码不能运行 为啥没有出现阻塞&#xff1f; 当前由于是同一个线程&#xff0c;此时的锁对象&#xff0c;就知道了第二次加锁的线程&#xff0c;就是持有锁的线程&#xff0c;第二次操作&#xff…
阅读更多...
一天吃透Java并发面试八股文

一天吃透Java并发面试八股文

内容摘自我的学习网站&#xff1a;topjavaer.cn 分享50道Java并发高频面试题。 线程池 线程池&#xff1a;一个管理线程的池子。 为什么平时都是使用线程池创建线程&#xff0c;直接new一个线程不好吗&#xff1f; 嗯&#xff0c;手动创建线程有两个缺点 不受控风险频繁创…
阅读更多...
【WPF.NET开发】WPF中的版式

【WPF.NET开发】WPF中的版式

本文内容 改进的文本质量和性能丰富的版式增强的国际文本支持增强的字体支持新的文本应用程序编程接口 (API) 本主题介绍 WPF 的主要版式功能。 这些功能包括改进的文本呈现质量和性能、OpenType 版式支持、增强的国际文本、增强的字体支持和新的文本应用程序编程接口 (API)。…
阅读更多...
SpringMVC RESTful案例

SpringMVC RESTful案例

文章目录 1、准备工作2、功能清单3、具体功能&#xff1a;访问首页a>配置view-controllerb>创建页面 4、具体功能&#xff1a;查询所有员工数据a>控制器方法b>创建employee_list.html 5、具体功能&#xff1a;删除a>创建处理delete请求方式的表单b>删除超链接…
阅读更多...
多元化的App封装打包平台，解锁应用发布效率

多元化的App封装打包平台，解锁应用发布效率

在数字化时代&#xff0c;移动应用已成为连接用户与服务的重要桥梁。对于开发者而言&#xff0c;将应用从代码转化为用户可以直接下载安装的产品&#xff0c;这一过程的效率和质量至关重要。App封装打包平台的出现&#xff0c;为开发者提供了便捷的应用构建、测试和分发解决方案…
阅读更多...
Robot Framework之python脚本调用

Robot Framework之python脚本调用

目录 目录结构 ​编辑 Python函数作为关键字 一、通过Import Library关键字在*** Test Cases ***中引用python脚本 ​编辑 二、通过Library关键字在*** Settings ***中引入python脚本 Python类作为测试库 一、通过Library关键字在*** Settings ***引入python脚本中的类 …
阅读更多...
机器学习_7、KNN

机器学习_7、KNN

数据采用&#xff1a;电离层数据 KNN完整的代码电离层数据资源-CSDN文库 代码 import os import csv import numpy as np from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import …
阅读更多...
DNS域名解析协议

DNS域名解析协议

文章目录 DNS域名解析协议一、DNS系统的作用1、DNS的定义2、DNS域名解析2.1 正向解析2.2 反向解析 3、DNS域名结构 二、DNS服务器类型1、主域名服务器2、从域名服务器3、缓存域名服务器4、权威dns服务器 三、DNS查询类型及原理1、查询方式1.1 递归查询1.2 迭代查询 2、DNS查询原…
阅读更多...
墙地砖外形检测的技术方案-图像增强

墙地砖外形检测的技术方案-图像增强

基础理论 本例中使用漫射场光源&#xff0c;在采集图像的过程中&#xff0c;更容易可能会受环境中光源照射不足的可能性&#xff0c;导致采集的图像对比度不足&#xff0c;图像视觉效果较暗。可通过直方图均衡化或者直方图规定化。利用直方图规定化进行图像增强。 案例图片 如…
阅读更多...
实例分割论文精读：Mask R-CNN

实例分割论文精读：Mask R-CNN

1.摘要 本文提出了一种概念简单、灵活、通用的实例分割方法&#xff0c;该方法在有效地检测图像中的物体同时&#xff0c;为每个物体实例生成一个实例分割模板&#xff0c;添加了一个分支&#xff0c;用于预测一个对象遮罩&#xff0c;与现有的分支并行&#xff0c;用于边界框…
阅读更多...
node各个版本的下载地址

node各个版本的下载地址

下载地址&#xff1a; https://nodejs.org/dist/ 可以下载多个版本&#xff0c;使用nvm控制切换&#xff08;需要先安装nvm再安装node&#xff09; nvm下载地址&#xff08;访问的是github&#xff0c;请科学上网&#xff0c;下载后解压安装exe即可&#xff09;&#xff1a;h…
阅读更多...
【leetcode题解C++】54.螺旋矩阵I and 59.螺旋矩阵II

【leetcode题解C++】54.螺旋矩阵I and 59.螺旋矩阵II

54.螺旋矩阵I 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;m…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023