Web 前端常用正则校验规则

这篇具有很好参考价值的文章主要介绍了Web 前端常用正则校验规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Web 前端常用正则校验规则

作为 Web 前端开发,常用的正则校验规则有很多。下面是一些常见的示例:

1. 校验手机号码

手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式:

const regex = /^1[3456789]\d{9}$/;

在这个示例中,正则表达式 ^1[3456789]\d{9}$ 表示:

  • ^ 表示匹配字符串的开头。
  • 1 表示必须以数字 1 开头。
  • [3456789] 表示第二位必须是 3、4、5、6、7、8 或 9 中的一个。
  • \d{9} 表示后面必须跟着 9 个数字。
  • $ 表示匹配字符串的结尾。

2. 校验邮箱地址

邮箱地址的正则表达式可以根据不同的邮箱服务提供商进行调整。以下是一个通用的邮箱地址正则表达式:

const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

在这个示例中,正则表达式 ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ 表示:

  • ^ 表示匹配字符串的开头。
  • \w+ 表示必须以一个或多个字母、数字或下划线开头。
  • ([-+.]\w+)* 表示可以包含一个或多个连字符、加号或点号,后面跟着一个或多个字母、数字或下划线。
  • @ 表示必须包含一个 @ 符号。
  • \w+ 表示必须包含一个或多个字母、数字或下划线。
  • ([-.]\w+)* 表示可以包含一个或多个连字符或点号,后面跟着一个或多个字母、数字或下划线。
  • \. 表示必须包含一个点号。
  • \w+ 表示必须包含一个或多个字母、数字或下划线。

3. 校验身份证号码

身份证号码的正则表达式可以根据不同的国家和地区进行调整。以下是中国大陆身份证号码的正则表达式:

const regex =
  /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/;

// 身份证号码为15位或18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
// const regex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

在这个示例中,正则表达式 ^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$ 表示:

  • ^ 表示匹配字符串的开头。
  • [1-9] 表示第一位必须是 1 到 9 中的一个。
  • \d{5} 表示后面必须跟着 5 个数字。
  • (19|20) 表示第七到第十位必须是 19 或 20。
  • \d{2} 表示第十一到第十二位必须是一个两位数字。
  • (0[1-9]|1[012]) 表示第十三到第十四位必须是 01 到 12 中的一个。
  • (0[1-9]|[12]\d|3[01]) 表示第十五到第十六位必须是 01 到 31 中的一个。
  • \d{3} 表示第十七到第十九位必须是三个数字。
  • [0-9Xx] 表示最后一位可以是数字或大写字母 X。

4. 校验密码强度

校验密码强度通常需要考虑密码的长度、字符类型和组合方式等因素。以下是一个简单的密码强度正则表达式,要求密码长度为 6 到 20 个字符,且必须包含字母和数字:

const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;

在这个示例中,正则表达式 ^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$ 表示:

  • ^ 表示匹配字符串的开头。
  • (?=.*[0-9]) 表示必须包含至少一个数字。
  • (?=.*[a-zA-Z]) 表示必须包含至少一个字母。
  • ([a-zA-Z0-9]{6,20}) 表示密码长度必须为 6 到 20 个字符,且只能包含字母和数字。
  • $ 表示匹配字符串的结尾。

5. 校验 URL 地址

校验 URL 地址通常需要考虑 URL 的协议、主机名、端口和路径等部分。以下是一个简单的 URL 校验正则表达式:

const regex = /^(http|https):\/\/([\w-]+\.)+[\w-]+(:\d+)?(\/\S*)?$/;

// const regex =
//   /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;

在这个示例中,正则表达式 ^(http|https):\/\/([\w-]+\.)+[\w-]+(:\d+)?(\/\S*)?$ 表示:

  • ^ 表示匹配字符串的开头。
  • (http|https) 表示必须以 http 或 https 开头。
  • :\/\/ 表示匹配冒号和双斜杠。
  • ([\w-]+\.)+[\w-]+ 表示匹配主机名,必须包含至少一个连字符或字母,后面跟着一个或多个字母、数字或连字符。
  • (:\d+)? 表示匹配可选的端口号,必须以冒号和一个或多个数字结尾。
  • (\/\S*)? 表示匹配可选的路径,必须以斜杠开头,后面可以跟任意非空白字符。
  • $ 表示匹配字符串的结尾。

当然,还有一些其他常用的正则校验规则,例如:

6. 校验邮政编码

邮政编码的正则表达式可以根据不同的国家和地区进行调整。以下是中国大陆邮政编码的正则表达式:

const regex = /^[1-9]\d{5}$/;

在这个示例中,正则表达式 ^[1-9]\d{5}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [1-9] 表示第一位必须是 1 到 9 中的一个。
  • \d{5} 表示后面必须跟着 5 个数字。
  • $ 表示匹配字符串的结尾。

7. 校验 IP 地址

IP 地址的正则表达式可以根据不同的 IP 地址格式进行调整。以下是一个简单的 IPv4 地址校验正则表达式:

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

在这个示例中,正则表达式 ^([01]?\d{1,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,2}|2[0-4]\d|25[0-5])\.([01]?\d{1,2}|2[0-4]\d|25[0-5])$ 表示:

  • ^ 表示匹配字符串的开头。
  • ([01]?\d{1,2}|2[0-4]\d|25[0-5]) 表示匹配 0 到 255 之间的数字。
  • \. 表示匹配点号。
  • $ 表示匹配字符串的结尾。

8. 校验护照号码

以下是中国大陆护照号码的正则表达式:

const regex = /^[EeGg]\d{8}$/;

在这个示例中,正则表达式 ^[EeGg]\d{8}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [EeGg] 表示第一位必须是大写字母 E 或 G,或小写字母 e 或 g 中的一个。
  • \d{8} 表示后面必须跟着 8 个数字。
  • $ 表示匹配字符串的结尾。

9. 校验港澳通行证号码

以下是中国大陆港澳通行证号码的正则表达式:

const regex = /^[HMhm]\d{8}$/;

在这个示例中,正则表达式 ^[HMhm]\d{8}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [HMhm] 表示第一位必须是大写字母 H 或 M,或小写字母 h 或 m 中的一个。
  • \d{8} 表示后面必须跟着 8 个数字。
  • $ 表示匹配字符串的结尾。

10. 校验中文名

中文名的正则表达式可以根据具体情况进行调整。以下是一个简单的中文名校验正则表达式,要求中文名只包含汉字:

const regex = /^[\u4e00-\u9fa5]{2,4}$/;

在这个示例中,正则表达式 ^[\u4e00-\u9fa5]{2,4}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [\u4e00-\u9fa5] 表示匹配任意一个汉字。
  • {2,4} 表示匹配 2 到 4 个汉字。
  • $ 表示匹配字符串的结尾。

另外,如果要校验中文名中是否包含汉字以外的字符,可以使用类似于以下的正则表达式:

const regex = /^[\u4e00-\u9fa5·]{2,20}$/;

在这个示例中,正则表达式 ^[\u4e00-\u9fa5·]{2,20}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [\u4e00-\u9fa5·] 表示匹配任意一个汉字或中文间隔符 “·”。
  • {2,20} 表示匹配 2 到 20 个汉字或中文间隔符 “·”。
  • $ 表示匹配字符串的结尾。

这个示例中使用了 “·” 作为中文名的间隔符,这是一种常见的方式,但并不是唯一正确的方式。在实际应用中,应根据具体情况选择合适的间隔符,并根据需要进行调整和优化。

11. 校验外国人居留证号码

以下是一个简单的外国人居留证校验正则表达式,要求居留证号码只包含英文字母和数字:

const regex = /^[A-Za-z0-9]{8,20}$/;

在这个示例中,正则表达式 ^[A-Za-z0-9]{8,20}$ 表示:

  • ^ 表示匹配字符串的开头。
  • [A-Za-z0-9] 表示匹配任意一个英文字母或数字。
  • {8,20} 表示匹配 8 到 20 个英文字母或数字。
  • $ 表示匹配字符串的结尾。

12. 校验只允许字母和数字

只允许字母和数字的正则表达式如下:

const regex = /^[A-Za-z0-9]+$/;

在这个示例中,正则表达式 ^[A-Za-z0-9]+$ 表示:

  • ^ 表示匹配字符串的开头。
  • [A-Za-z0-9] 表示匹配任意一个英文字母或数字。
  • + 表示匹配前面的字符至少一次或多次。
  • $ 表示匹配字符串的结尾。

这个正则表达式可以用来校验只包含字母和数字的字符串,例如用户名、密码等。需要注意的是,这个正则表达式不包括空格和其他特殊字符。如果需要校验包括空格和其他特殊字符的字符串,可以根据具体情况进行调整和优化。

13. 校验首位不为零的数字

首位不为零的数字的正则表达式如下:

const regex = /^[1-9]\d*$/;

在这个示例中,正则表达式 ^[1-9]\d*$ 表示:

  • ^ 表示匹配字符串的开头。
  • [1-9] 表示第一位必须是 1 到 9 中的一个。
  • \d* 表示后面可以跟着任意个数字(包括零个数字)。
  • $ 表示匹配字符串的结尾。

这个正则表达式可以用来校验整数,要求整数的首位必须是 1 到 9 中的一个,可以包含多个数字。此外,这个正则表达式不包括小数和负数,如果需要校验包括小数和负数的数字,可以根据具体情况进行调整和优化。

需要注意的是,以上示例只是常用的正则校验规则之一,实际应用中可能需要根据具体的业务需求进行调整和优化。同时,正则表达式的编写也需要考虑到性能和可读性等方面的因素。

14. 校验数值

  1. 匹配浮点数(包括整数和小数):

    const regex = /^[-+]?[0-9]*\.?[0-9]+([eE][-+]?[0-9]+)?$/;
    

    这个正则表达式匹配一个浮点数,包括整数和小数,可以有正负号,可以有指数形式。例如,可以匹配21.23-4.567.89e10等。

  2. 匹配正浮点数(只包括正整数和小数):

    const regex = /^[0-9]+(.[0-9]+)?$/;
    

    这个正则表达式匹配一个正浮点数,只包括正整数和小数。例如,可以匹配1001.234.567.89等。

  3. 匹配小数(可以为正小数、负小数或零):

    const regex = /^-?\d*\.\d+$/;
    

    这个正则表达式匹配一个小数,可以为正小数、负小数或零。例如,可以匹配1.23-4.560.0等。文章来源地址https://www.toymoban.com/news/detail-460871.html

到了这里,关于Web 前端常用正则校验规则的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI中的el-form常用校验规则

    elementUI中的el-form常用校验规则: 校验使用方式: 常用的校验规则:

    2024年02月07日
    浏览(40)
  • 常用的表单校验规则——邮箱/QQ/身份证号码/微信/电话/数字字母/整数/文本/密码等

    1.邮箱校验规则 2.邮箱校验规则  3.QQ校验规则 4.身份证号码校验规则   5.微信校验规则 6.电话校验规则  7.银行卡号校验规则  8.数字字母校验规则  9.整数校验规则  10.数字校验规则  11.文本校验规则  12.密码校验规则  最后附上 rules 中的使用方法             

    2024年02月05日
    浏览(54)
  • uniapp、vue、小程序常用的一些验证规则校验方法(例如:手机号。身份证、金额等)

    例如: 检查是否为空数组 、是否是空  不为空false 为空true、校验密码、校验手机号格式、校验邮箱格式、校验身份证号格式、校验值长度 不少于6位数、 电话号码加密   15288889999 转化为 152****9999、身份证号码加密、验证输入重量、金额等类型   例如 0.11  2.23  100.123等等

    2024年02月02日
    浏览(50)
  • 前端常用正则

    其他扩展 用于表单的校验 如下使用

    2024年02月17日
    浏览(26)
  • CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目

    template     el-button type=\\\"primary\\\" @click=\\\"addUser()\\\"新增用户/el-button     el-button type=\\\"danger\\\"批量删除/el-button     el-table         :data=\\\"userList\\\"         style=\\\"width: 100%\\\"         @selection-change=\\\"handleSelectionChange\\\"             !-- 复选框    --         el-table-column type=\\\"selection\\\" width=\\\"33%\\\"

    2024年02月19日
    浏览(38)
  • 大数据的常用算法(分类、回归分析、聚类、关联规则、神经网络方法、web数据挖掘)

    在大数据时代,数据挖掘是最关键的工作。大数据的挖掘是从海量、不完全的、有噪声的、模糊的、随机的大型数据库中发现隐含在其中有价值的、潜在有用的信息和知识的过程,也是一种决策支持过程。其主要基于人工智能,机器学习,模式学习,统计学等。通过对大数据

    2024年02月09日
    浏览(62)
  • 使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的业务编码规则管理

    在前面随笔《在Winform应用中增加通用的业务编码规则生成》,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端Web API接口,实现快速的Vue3+ElementPlus前端界面的开发整合,同样是基于代码生成工具实现快速的前端代码的生成处理。 在前面

    2024年02月04日
    浏览(44)
  • vue 校验手机号、网址(各种正则校验)

    平时我们在项目中form表单的时候,经常会遇到这些验证身份证、电话号的校验 总结一些常用到的 1、合法url 也可以单独的写一个校验文件,在util文件夹下新建一个validateRules.js文件 2、固定电话 9、统一信用社会代码 3、手机号码 4、手机号码或固定电话 5、电子邮箱 6、邮编

    2024年02月16日
    浏览(39)
  • uniapp表单uni-forms校验自定义校验规则,手机校验、身份证校验

    validateFunction 自定义校验规则 如果需要使用 validateFunction 自定义校验规则,则 不能采用 uni-forms 的 rules 属性来配置校验规则,这时候需要通过ref,在 onReady 生命周期调用组件的setRules方法绑定验证规则 无法通过props传递变量,是因为微信小程序会过滤掉对象中的方法,导致自定

    2024年02月11日
    浏览(91)
  • Vue rules校验规则详解

    当我们在开发Vue应用时,经常需要对表单进行校验,以确保用户输入的数据符合预期。Vue提供了一个强大的校验规则机制,通过定义rules规则,可以方便地对表单进行验证,并给出相应的错误提示。 在Vue的rules中,我们可以使用预定义的校验规则,如 required 、 type 、 min 、

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包