前端常用正则表达式

柴九哥-

2024-04-24 帮助1人

一、占位符

占位符：占据一个位置，说明后期你要给我一个相应的值

1. .点：代表一个任意的字符

let reg = /^.$/

2. \d:代表一个数字： 0-9

let reg = /^\d$/

3. \D:代表一个非数字

let reg = /^\D$/

4. \w:代表一个合法字符： 0-9 A-Z a-z

let reg = /^\w$/

5.\W:代表一个非法字符

let reg = /^\W$/

6.\s: 代表一个空字符：空格制表位换行

let reg = /^\s$/

7.\S: 代表一个非空字符

let reg = /^\S$/

8.[]:代表一个指定的范围中的某个字符，范围可以是具体的值范围，也可以是一个连续的范围

在描述连续范围的时候，-是一个连接符

[]里面的字符都当成普通字符来看待,相当于转义了

let reg = /^[12345]$/ //只能匹配一个

let reg = /^[1-5]$/

let reg = /^[0-9A-Za-z_]$/

let reg = /^[0.]$/

let reg = /^[^0]$/ //只能是0

二、修饰符

先占位，后修饰从左到右写

1. *:修饰前面的字符出现任意次

let reg = /^\d*$/

2. ?:修饰前面的字符出现0次或1次 ***

02012345678 >> 020-12345678

let reg = /^\d?$/

3. :修饰前面的字符出现1次或多次 *****

let reg = /^\d $/

4.{n}:修饰前面的字符出现n次 *****

let reg = /^\d{11}$/

let reg = /^\d{5}$/

手机号：第一位只能是1 第二位只能35789中的一个，剩余9位数字

let reg = /^1[35789]\d{9}$/

let reg = /^1[0-9]\d{9}$/

5.{n,m}:修饰前面的字符最少出现n次，最多出现m次 ****

02012345678 >> 020-12345678

let reg = /^0[1-9]\d{1,2}[-]?[1-9]\d{6,7}$/

6.{n,}:修饰前面的字符最少出现n次，最多没有限制 ***

let reg = /^\w{3,}$/

三、小案例

验证用户名、手机号、邮箱号等

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
span {
color: red;
}
</style>
</head>
<body>
用户名：<input
class="username"
type="text"
placeholder="请输入至少三位合法字符"
/>
<span></span>
<br />
密码：
<input class="password" type="text" placeholder="请输入3-16位密码" /> <br />
手机号：
<input class="phone" type="text" placeholder="请输入合法的手机号" /> <br />
邮箱：
<input class="email" type="text" placeholder="请输入一个合法的邮箱地址" />
<br />
<button>提交</button>
<script>
let btn = document.querySelector('button')
let username = document.querySelector('.username')
let password = document.querySelector('.password')
let phone = document.querySelector('.phone')
let email = document.querySelector('.email')
btn.addEventListener('click', function() {
let regname = /^\w{3,}$/
if (!regname.test(username.value)) {
// alert('用户名输入不合法')
let span = username.nextElementSibling
span.innerHTML = '用户名输入不合法'
username.focus()
return
} else {
let span = username.nextElementSibling
span.innerHTML = ''
}
let regpass = /^.{3,16}$/
if (!regpass.test(password.value)) {
alert('请输入3-16位密码')
password.focus()
return
}
let regphone = /^1[35789]\d{9}$/
if (!regphone.test(phone.value)) {
alert('手机号输入不合法')
phone.focus()
return
}
// wuhu0723@126.com
let regemail = /^\w [@]\w{2,}[.]\w{2,4}$/
if (!regemail.test(email.value)) {
alert('邮箱输入不合法')
email.focus()
return
}
console.log('提交成功')
})
</script>
</body>
</html>

验证身份证号

<script>
// 身份证号：一共18位
// 18纯数字
// 17数字 x|X
let id = prompt('请输入身份证号')
// |：多种情况满足其中一个
let reg = /^(1[34])|(2[56])$/
let result = reg.test(id)
console.log(result)
</script>

以下内容转载自：

海涛czwx

1.数字相关的正则表达式

数字：^[0-9]*$
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})?$
正整数：^\d $ 或 ^[1-9]\d*|0$
负整数：^-[1-9]\d*|0$ 或 ^((-\d )|(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)$

2.字符相关的正则表达式

汉字：^[\u4e00-\u9fa5]{0,}$
长度为3-20的所有字符：^.{3,20}$
由数字和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}$
帐号是否合法(字母开头，允许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]).{8,10}$

3.固定格式约定俗成的正则表达式

这篇好文章是转载于：学新通技术网

前端常用正则表达式

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐