文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

正则表达式:解锁前端表单校验的高效方法

2024-11-29 18:23

关注

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

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

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

RegExp函数

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

RegExp属性

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

  1. source(只读): 返回正则表达式的模式字符串,即正则表达式的文本模式部分。
  2. global(只读): 返回一个布尔值,表示是否开启全局匹配模式。如果为 true,则正则表达式会匹配所有符合模式的文本,而不是在找到第一个匹配后停止。
  3. ignoreCase(只读): 返回一个布尔值,表示是否开启忽略大小写模式。如果为 true,则正则表达式在匹配时会忽略大小写。
  4. multiline(只读): 返回一个布尔值,表示是否开启多行匹配模式。如果为 true,则正则表达式中的 ^ 和 $ 会匹配字符串中每一行的开始和结束位置。
  5. sticky(只读): 返回一个布尔值,表示是否开启粘连匹配模式。如果为 true,则正则表达式将会从目标字符串的当前 lastIndex 位置开始匹配。
  6. unicode(只读): 返回一个布尔值,表示是否开启 Unicode 匹配模式。如果为 true,则正则表达式会正确处理 Unicode 字符。
  7. 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 以及正则表达式对象都有一些方法可以用于执行不同的操作。以下是常见的正则表达式方法:

  1. test(): 在字符串中测试正则表达式是否匹配。返回一个布尔值,表示是否找到匹配项。
const regex = /pattern/;
const text = "This is a pattern test.";
console.log(regex.test(text)); // true
  1. 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); // 继续搜索下一个匹配项
}
  1. match(): 在字符串中搜索匹配项,返回匹配结果的数组或 null。如果正则表达式带有全局标志 g,则返回所有匹配项的数组。否则,只返回第一个匹配项的数组。
const regex = /pattern/g;
const text = "This is a pattern test.";
const matches = text.match(regex);
console.log(matches); // ["pattern"]
  1. search(): 在字符串中查找匹配项,返回第一个匹配项的索引。如果找不到匹配项,则返回 -1。
const regex = /pattern/;
const text = "This is a pattern test.";
console.log(text.search(regex)); // 10
  1. 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 构造函数的第二个参数还可以包含其他标志,用于指定正则表达式的附加选项。以下是常见的标志:

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

注意:

常用的正则例子

只包含数字(包括正数、负数、零)

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

解释:

注意:

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

解释:

注意:

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

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

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

解释:

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

注意:

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

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

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

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

解释:

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

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

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

解释:

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

请注意:

只校验端口号

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

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 到 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 地址的正则表达式:

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

IPv6 地址的正则表达式:

这个正则表达式可以校验 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}$/; //银行卡号


来源:海燕技术栈内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯