正则表达式：解锁前端表单校验的高效方法-51CTO.COM

正则表达式字符含意义

正则表达式（Regular Expression，简称为Regex或RegExp）是用于匹配和搜索文本模式的工具。它是一个强大且灵活的字符串处理工具，可以用来检查一个字符串是否符合特定的模式，或者从一个文本中提取满足条件的部分。

在正则表达式中，可以使用不同的元字符和特殊符号来定义模式。以下是一些常见的正则表达式元字符和它们的含义：

.：匹配任意字符，除了换行符。
*：匹配前面的元素零次或多次。
+：匹配前面的元素一次或多次。
?：匹配前面的元素零次或一次。
^：匹配字符串的开始位置。
$：匹配字符串的结束位置。
[]：定义字符集，匹配括号内的任意一个字符。
|：表示逻辑“或”，匹配两个或多个表达式之一。
()：分组，将表达式组合为一个子表达式，可以使用 | 和量词对整个组进行操作。用法当谈到正则表达式时，还有一些其他重要的概念和用法需要了解：
字符类和量词：在正则表达式中，使用方括号 [] 来定义字符类，它可以匹配方括号内的任意一个字符。例如，[aeiou] 匹配任何一个元音字母。使用花括号 {} 可以指定匹配的次数，例如，a{2,4} 匹配连续两到四个字母 a。
预定义字符类：正则表达式提供了一些预定义的字符类，例如，\d 匹配任意一个数字，\w 匹配任意一个字母或数字，\s 匹配任意一个空白字符。
转义字符：反斜杠 \ 是正则表达式的转义字符，用于转义特殊字符，使其失去特殊含义。例如，\. 可以匹配真正的句点而不是匹配任意字符。
贪婪匹配和非贪婪匹配：正则表达式默认是贪婪匹配，即尽可能多地匹配字符。非贪婪匹配在量词后加上问号 ?，使其尽可能少地匹配字符。例如，.* 是贪婪匹配，而 .*? 是非贪婪匹配。
边界匹配：正则表达式可以用 ^ 表示字符串的开始，用 $ 表示字符串的结束。这样可以确保模式匹配必须出现在字符串的开始或结束位置。
替换和捕获：正则表达式可以用于替换文本中的匹配项，也可以使用括号 () 进行捕获，并在替换中引用捕获的内容。
修饰符：正则表达式通常支持一些修饰符来修改其行为。例如，i 表示不区分大小写，g 表示全局匹配，m 表示多行匹配等。

不过，不同的编程语言和工具对正则表达式的支持可能有所不同，因此在具体应用中需要查阅相应的文档和规范。

RegExp函数

const regex = new RegExp("pattern"，gi);

RegExp属性

在 JavaScript 中，正则表达式的构造函数 RegExp 具有以下属性：

source（只读）：返回正则表达式的模式字符串，即正则表达式的文本模式部分。
global（只读）：返回一个布尔值，表示是否开启全局匹配模式。如果为 true，则正则表达式会匹配所有符合模式的文本，而不是在找到第一个匹配后停止。
ignoreCase（只读）：返回一个布尔值，表示是否开启忽略大小写模式。如果为 true，则正则表达式在匹配时会忽略大小写。
multiline（只读）：返回一个布尔值，表示是否开启多行匹配模式。如果为 true，则正则表达式中的 ^ 和 $ 会匹配字符串中每一行的开始和结束位置。
sticky（只读）：返回一个布尔值，表示是否开启粘连匹配模式。如果为 true，则正则表达式将会从目标字符串的当前 lastIndex 位置开始匹配。
unicode（只读）：返回一个布尔值，表示是否开启 Unicode 匹配模式。如果为 true，则正则表达式会正确处理 Unicode 字符。
flags（只读）：返回包含正则表达式标志的字符串，标志是用来指定正则表达式的附加选项的，例如 "gi" 表示同时开启全局匹配和忽略大小写模式。

这些属性可以通过正则表达式对象的构造函数 RegExp 的实例来访问。例如：

const regex = new RegExp("pattern", "gi");
console.log(regex.source); // "pattern"
console.log(regex.global); // true
console.log(regex.ignoreCase); // true
console.log(regex.multiline); // false
console.log(regex.sticky); // false
console.log(regex.unicode); // false
console.log(regex.flags); // "gi"

以上代码中的 "pattern" 是一个示例正则表达式的模式字符串，可以根据需要替换成实际的正则表达式模式。

RegExp对象方法

在 JavaScript 中，正则表达式的构造函数 RegExp 以及正则表达式对象都有一些方法可以用于执行不同的操作。以下是常见的正则表达式方法：

test()：在字符串中测试正则表达式是否匹配。返回一个布尔值，表示是否找到匹配项。

const regex = /pattern/;
const text = "This is a pattern test.";
console.log(regex.test(text)); // true

exec()：在字符串中执行正则表达式搜索，返回匹配结果的数组或 null。该方法返回一个数组，包含匹配到的文本以及捕获组的信息。

const regex = /pattern/g;
const text = "This is a pattern test.";
let match = regex.exec(text);
while (match !== null) {
  console.log(match[0]); // 输出匹配到的文本
  match = regex.exec(text); // 继续搜索下一个匹配项
}

match()：在字符串中搜索匹配项，返回匹配结果的数组或 null。如果正则表达式带有全局标志 g，则返回所有匹配项的数组。否则，只返回第一个匹配项的数组。

const regex = /pattern/g;
const text = "This is a pattern test.";
const matches = text.match(regex);
console.log(matches); // ["pattern"]

search()：在字符串中查找匹配项，返回第一个匹配项的索引。如果找不到匹配项，则返回 -1。

const regex = /pattern/;
const text = "This is a pattern test.";
console.log(text.search(regex)); // 10

replace()：在字符串中使用替换文本替换匹配项。

const regex = /pattern/g;
const text = "This is a pattern test.";
const replacedText = text.replace(regex, "replacement");
console.log(replacedText); // "This is a replacement test."

RegExp`构造函数的第二个参数

除了 "gi"（全局匹配和忽略大小写）之外，RegExp 构造函数的第二个参数还可以包含其他标志，用于指定正则表达式的附加选项。以下是常见的标志：

g（全局匹配）：查找所有匹配项，而不是在找到第一个匹配项后停止。
i（忽略大小写）：在匹配时忽略目标字符串的大小写。
m（多行匹配）：开启多行模式。在此模式下，^ 和 $ 会匹配字符串中每一行的开始和结束位置，而不仅仅是整个字符串的开始和结束。
s（单行匹配）：开启单行模式。在此模式下，. 可以匹配包括换行符在内的任意字符。
u（Unicode 匹配）：开启 Unicode 模式。在此模式下，将正确处理 Unicode 字符。
y（粘连匹配）：开启粘连匹配模式。正则表达式将从目标字符串的当前 lastIndex 位置开始匹配。
d（具有 dollar 符号的特殊字符）：开启允许使用 $ 符号匹配行尾。

这些标志可以单独使用，也可以组合使用。例如，如果需要开启全局匹配、忽略大小写和多行匹配，可以使用 "gim"。

注意：

标志的顺序并不重要，例如 "gi" 和 "ig" 都会开启全局匹配和忽略大小写。
如果在构造函数中同时使用了某个标志，在正则表达式字面量中也使用了相同标志，正则表达式字面量中的标志会覆盖构造函数中的标志。例如：new RegExp("pattern", "i") 和 /pattern/i 是等效的，都表示忽略大小写匹配。
不是所有的标志都在所有 JavaScript 引擎中都得到支持。因此，在使用非全局共享的正则表达式时，最好只使用必要的标志。

常用的正则例子

只包含数字（包括正数、负数、零）

const reg = /^-?\d+(\.\d+)?$/;

console.log(reg.test(123)); // true
console.log(reg.test(-123)); // true
console.log(reg.test(-12.3)); // true
console.log(reg.test(0)); // true
console.log(reg.test('0aaaaa')); // false

解释：

^ 表示匹配字符串的开始位置。
-? 表示可选的负号，即匹配一个或零个减号。
\d+ 表示匹配一个或多个数字。
(\.\d+)? 表示可选的小数部分，其中 \. 表示匹配一个点（小数点），\d+ 表示匹配一个或多个数字。
$ 表示匹配字符串的结束位置。

注意：

这个正则表达式只匹配纯数字字符串，不包含指数形式（如科学计数法）。
如果要匹配纯整数字符串（不包含小数），可以去掉 (\.\d+)? 部分，即使用 ^-?\d+$。只包含英文数字及下划线要匹配只包含英文字母、数字和下划线的正则表达式，可以使用以下模式：

const reg = /^[A-Za-z0-9_]+$/;
console.log(reg.test(123)); // true
console.log(reg.test(-123)); // false
console.log(reg.test('aaa11')); // true
console.log(reg.test('_a')); // true

解释：

^ 表示匹配字符串的开始位置。
[A-Za-z0-9_] 表示一个字符类，匹配任意一个大写字母、小写字母、数字或下划线。
+ 表示匹配前面的元素一个或多个次数。
$ 表示匹配字符串的结束位置。

注意：

这个正则表达式只匹配完全由英文字母、数字和下划线组成的字符串。
如果字符串可以为空（即长度为零），可以将 + 修改为 *，即使用 ^[A-Za-z0-9_]*$。这样可以允许空字符串的匹配。

只包含中英文数字及键盘上的特殊字符

要匹配只包含中文、英文字母、数字以及键盘上的特殊字符的正则表达式，可以使用以下模式：

const reg = /^[\u4E00-\u9FA5A-Za-z0-9`~!@#$%^&*()_\-+=\[\]{}|\\:;"'<>,.?/]+$/;

解释：

^ 表示匹配字符串的开始位置。
[\u4E00-\u9FA5] 表示匹配中文字符的范围，它包含了常见的中文字符。
A-Za-z 表示匹配任意一个大写字母或小写字母。
0-9 表示匹配任意一个数字。
`~!@#$%^&*()_\-+=\[\]{}|\\:;"'<>,.?/` 表示匹配键盘上的特殊字符。
+ 表示匹配前面的元素一个或多个次数。
$ 表示匹配字符串的结束位置。

这个正则表达式可以匹配只包含中文、英文字母、数字以及键盘上的特殊字符的字符串。

注意：

这个正则表达式仅包含了一部分常见的中文字符，并不包含全部的中文字符范围。如果需要涵盖更多中文字符，可以根据需求扩展范围。
对于特殊字符的范围，这里列出了一些常见的特殊字符，但并不是所有键盘上的特殊字符都包含在内。如果有特定特殊字符需求，可以在方括号中添加相应的字符。
由于涉及中文字符，建议使用 Unicode 编码表示中文字符的范围，因此 \u4E00-\u9FA5 表示中文字符的范围。

校验密码是否符合规则的正则

要校验密码是否符合规则，通常可以使用正则表达式来检查密码是否满足特定的要求。下面是一个示例正则表达式，用于校验密码是否符合一般的密码规则：

这个正则表达式强制密码必须包含至少一个字母、一个数字和一个特殊字符，并且密码长度至少为 8 个字符。

const reg =/ ^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/

解释：

^ 表示匹配字符串的开始位置。
(?=.*[A-Za-z]) 表示使用正向肯定预查来确保密码中包含至少一个字母（大小写均可）。
(?=.*\d) 表示使用正向肯定预查来确保密码中包含至少一个数字。
(?=.*[@$!%*?&]) 表示使用正向肯定预查来确保密码中包含至少一个特殊字符（可以根据需要扩展特殊字符的范围）。
[A-Za-z\d@$!%*?&]{8,} 表示匹配至少包含 8 个以上字符的字母、数字和特殊字符的组合。
$ 表示匹配字符串的结束位置。请根据自己的密码需求更改正则。

校验http或者https端口号的正则

校验 HTTP 或 HTTPS 端口号的正则表达式可以使用以下模式：

const reg = /^(http|https):\/\/(www\.)?[A-Za-z0-9]+\.[A-Za-z]+(:[0-9]+)?$/

解释：

^ 表示匹配字符串的开始位置。
(http|https) 表示匹配 "http" 或 "https" 中的一个。
:\/\/ 表示匹配 "://"。
(www\.)? 表示匹配可选的 "www."，即网址可能有 "www." 前缀或没有。
[A-Za-z0-9]+ 表示匹配至少一个字母或数字。
\. 表示匹配点（用于域名部分的分隔）。
[A-Za-z]+ 表示匹配至少一个字母（用于域名的顶级域部分）。
(:[0-9]+)? 表示匹配可选的冒号加上至少一个数字，用于表示端口号。
$ 表示匹配字符串的结束位置。

这个正则表达式可以匹配以下样例：

请注意：

这个正则表达式只校验 URL 中的域名部分和端口号，不涉及其他 URL 组件（例如路径、查询参数等）的校验。
此处的正则表达式是一个简单的示例，实际的 URL 校验可能更加复杂，可以根据需求进行修改和扩展。
在实际应用中，也可以使用编程语言提供的 URL 解析函数或库来解析 URL，并从中提取出域名和端口号进行校验。

只校验端口号

校验端口号是否正确的正则表达式如下：

const reg =/^(0|([1-9]\d{0,3})|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/

解释：这个正则表达式用于校验端口号是否正确。它可以匹配范围在 0 到 65535 的合法端口号。端口号是一个 16 位无符号整数。

正则表达式的具体规则如下：

^ 表示匹配字符串的开始位置。
0 匹配端口号为 0 的情况。
[1-9]\d{0,3} 匹配端口号在 1 到 9999 之间的情况。
[1-5]\d{4} 匹配端口号在 10000 到 59999 之间的情况。
6[0-4]\d{3} 匹配端口号在 60000 到 64999 之间的情况。
65[0-4]\d{2} 匹配端口号在 65000 到 65499 之间的情况。
655[0-2]\d 匹配端口号在 65500 到 65529 之间的情况。
6553[0-5] 匹配端口号在 65530 到 65535 之间的情况。
$ 表示匹配字符串的结束位置。

这个正则表达式可以用于验证端口号是否在 0 到 65535 的范围内，是否为合法的端口号。

校验正确的ip地址

要校验是否是正确的 IP 地址（IPv4 或 IPv6），可以使用以下两个正则表达式分别进行匹配：

IPv4 地址的正则表达式：

const reg = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$/;

IPv6 地址的正则表达式：

const reg = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;

解释：

IPv4 地址的正则表达式：

^ 表示匹配字符串的开始位置。
(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2}) 表示匹配 0 到 255 之间的数字，考虑到前导零的情况。
\. 表示匹配点。
(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3} 表示匹配三个点隔开的数字段。
$ 表示匹配字符串的结束位置。

这个正则表达式可以校验 IPv4 地址是否合法。

IPv6 地址的正则表达式：

^ 表示匹配字符串的开始位置。
([0-9a-fA-F]{1,4}:){7} 表示匹配 7 组以冒号分隔的 16 进制数。
[0-9a-fA-F]{1,4} 表示匹配一个 16 进制数。
$ 表示匹配字符串的结束位置。

这个正则表达式可以校验 IPv6 地址是否合法。

请注意，正则表达式仅可以校验 IP 地址的格式是否正确，无法判断其是否为真实可用的 IP 地址。如果需要对 IP 地址进行更严格的验证，可以在代码中进一步检查 IP 地址的有效性。

一些号码（电话号、身份证、银行卡）

这里给到的示例只针对中国大陆使用的：

const regPhone = /^\+?[0-9\s-]+$/; // 电话号码

const regId = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dX]$/; // 身份证号

const regBank = /^[1-9]\d{9,18}$/; //银行卡号