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

前言

在前端开发中,经常需要处理 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~091~12):

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

一个月的 31 天( 01~091~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.mzph.cn/news/623482.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++面试:单例模式、工厂模式等简单的设计模式 创建型、结构型、行为型设计模式的应用技巧

理解和能够实现基本的设计模式是非常重要的。这里&#xff0c;我们将探讨两种常见的设计模式&#xff1a;单例模式和工厂模式&#xff0c;并提供一些面试准备的建议。 目录 单例模式 (Singleton Pattern) 工厂模式 (Factory Pattern) 面试准备 1. 理解设计模式的基本概念…

SpringMVC中拦截器的简单使用

步骤一&#xff1a;创建拦截器类 首先&#xff0c;我们需要创建一个拦截器类&#xff0c;该类需要实现HandlerInterceptor接口。这个接口定义了三个方法&#xff0c;分别在请求处理前、请求处理后和视图渲染后执行。 import org.springframework.web.servlet.HandlerIntercep…

使用JDK自带的jvisualvm工具查看堆dump文件【回顾】

JDK自带的jvisualvm的使用 打开方式&#xff1a; 直接命令行输入&#xff1a;jvisualvm ,然后回车​​​​​​​ ​​ 或者去jdk的bin目录下找到打开 安装visual GC插件 检测死锁 再点击“死锁 dump”就可以看到死锁的线程信息了&#xff1b;

LeeCode前端算法基础100题(17)- 罗马数字转整数

一、问题详情: 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II ,即为两个并列的 1 …

linux c语言记录内核错误

在 Linux C 程序中&#xff0c;将信息记录在日志文件中通常使用 syslog 守护进程来实现。你可以使用 syslog() 函数将自定义的错误信息记录到系统日志中。另外&#xff0c;你也可以使用开源库如 liblog&#xff0c;log4c 等来更加灵活地记录日志。 下面是一个简单的示例代码&a…

Vulnhub靶机:driftingblues 4

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;driftingblues4&#xff08;10.0.2.20&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entr…

【Python数据分析系列】实现txt文件与列表(list)相互读写转换(源码+案例)

这是Python数据分析系列原创文章&#xff0c;我的第199篇原创文章。 一、问题 平时在做数据分析或者程序开发的时候&#xff0c;需要将中间的一些结果或最后的处理结果保存下来&#xff0c;比如保存为txt格式的文本文件&#xff0c;这就涉及列表与txt之间的一种读取和写入操作…

spring cloud feign demo

1. 工程结构 2. 父工程pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.…

JVM实战(17)——模拟对象晋升

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

django中orm模型类多种用法

模型准确且唯一的描述了数据。它包含您储存的数据的重要字段和行为。一般来说&#xff0c;每一个模型都映射一张数据库表。 每个模型都是一个 Python 的类&#xff0c;这些类继承 django.db.models.Model模型类的每个属性都相当于一个数据库的字段。利用这些&#xff0c;Djang…

(每日持续更新)jdk api之FileInputStream基础、应用、实战

博主18年的互联网软件开发经验&#xff0c;从一名程序员小白逐步成为了一名架构师&#xff0c;我想通过平台将经验分享给大家&#xff0c;因此博主每天会在各个大牛网站点赞量超高的博客等寻找该技术栈的资料结合自己的经验&#xff0c;晚上进行用心精简、整理、总结、定稿&…

将PDF发票转换为excel、xml结构化数据的完美解决方案

随着电子发票的普及&#xff0c;越来越多的企业和个人开始使用PDF格式的电子发票。然而&#xff0c;有时我们需要将电子发票转换为XML格式以便于处理和分析。本文将介绍如何将收到的PDF发票下载为excel、xml文件。首先&#xff0c;我们需要明确一点&#xff0c;PDF是一种基于图…

1. FPGA概述

文章目录 1. 什么是FPGA2. 学习FPGA有什么用3. 学习FPGA需要何种先决条件 1. 什么是FPGA 这个问题太low了&#xff0c;身处数字时代&#xff0c;从事电子信息行业&#xff0c;居然不知道FPGA&#xff1f;岂非笑谈&#xff1f; 介绍FPGA的资料太多了&#xff0c;还是从它的字面…

Could NOT find Threads (missing: Threads_FOUND)

具体错误 -- Performing Test CMAKE_HAVE_LIBC_PTHREAD -- Performing Test CMAKE_HAVE_LIBC_PTHREAD - Failed -- Looking for pthread_create in pthreads -- Looking for pthread_create in pthreads - not found -- Looking for pthread_create in pthread -- Looking for…

C#编程-属性和反射

属性和反射 属性是将元数据信息和行为添加到应用程序代码中的简单技术。属性是允许您将声明信息添加到程序的元素。此声明信息在运行时用途广泛,可使用应用程序开发工具在设计时使用。 介绍属性 对象是由其属性值描述的。例如,汽车可以使用它的构造、型号或颜色来描述。类似…

ART-Adversarial Robustness Toolbox检测AI模型及对抗攻击的工具

一、工具简介 Adversarial Robustness Toolbox 是 IBM 研究团队开源的用于检测模型及对抗攻击的工具箱&#xff0c;为开发人员加强 AI模型被误导的防御性&#xff0c;让 AI 系统变得更加安全&#xff0c;ART支持所有流行的机器学习框架 &#xff08;TensorFlow&#xff0c;Ker…

SpringMVC RESTful案例

文章目录 1、准备工作2、功能清单3、具体功能&#xff1a;访问首页a>配置view-controllerb>创建页面 4、具体功能&#xff1a;查询所有员工数据a>控制器方法b>创建employee_list.html 5、具体功能&#xff1a;删除a>创建处理delete请求方式的表单b>删除超链接…

Web3社交治理:用户参与决策的新模式

Web3时代的到来不仅仅带来了区块链技术的创新&#xff0c;还为社交治理带来了全新的模式。传统社交平台上的决策权通常集中在平台的运营方&#xff0c;而Web3社交治理的兴起意味着用户能够更直接地参与到社交平台的决策过程中。本文将深入探讨Web3社交治理的背景、工作原理以及…

帆软笔记-决策表报对象使用(两表格联动)

效果描述如下&#xff1a; 数据库中有个聚合商表&#xff0c;和一个储能表&#xff0c;储能属于聚合商&#xff0c;桩表中有个字段是所属聚合商。 要求帆软有2个表格&#xff0c;点击某个聚合商&#xff0c;展示指定的储能数据。 操作&#xff1a; 帆软选中表格单元&#xf…

C语言实现动态数组

1.mj版本的动态数组 #include <stdio.h> #include <stdlib.h> #include <stdbool.h> #define DEFAULT_CAPACITY 10 #define ELEMENT_NOT_FOUND -1 // 定义全局变量 // 数组元素个数 int size 0; // 初始化动态数组 int* initArray(int capacity) {// 如果…