表单验证和正则表达式

正则表达式

使用单个字符串来表述，匹配一系列符合某个句法规则的 字符串搜索模式

搜索模式可以用于文本搜索和文本替换
- 是由一个字符序列形成的搜索模式
- 当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容
- 正则表达式可以是一个简单的字符，或一个更复杂的模式
- 正则表达式可用于所有文本搜索和文本替换的操作

定义正则表达式

普通定义（字面量）

const reg = / 123 /i (i, g,m,匹配模式)

构造函数

const regexp = new RegExp("123");

//相当于 /123/

const regexp = new RegExp("123","i);

//相当于/123/i;
const pattern = "123";

const flags = "i";

const reg = new RegExp(pattern,flags);

【匹配模式】

i (ignoreCase):不区分大小写的匹配
g(global) : 全局匹配，并非查到第一个字符就停止
m (multiline) :换行匹配

符号

边界符

^ ：表示匹配行首
$：表示匹配行尾
\b ：可以将单词分隔开

const = /^\bcat\b&/g;在全局匹配下，只找这一个单词

元字符

*：匹配前面字符的零次或多次
?：匹配前面字符的零次或一次
+：匹配前面字符的一次或多次
. ：任意字符，除换行符外\n\t\v\f\r
| ：逻辑符用于分开两个句法，用于分支结构

字符类

$a-z$ ：小写字母a-z
$A-Z$ ：大写字母A-Z
$0-9$ ：数字字符0-9
$\^abc$ ：匹配除abc外的任何字符

量词

{n}：匹配前一个字符n次
{n,}：匹配前一个字符n次以上
{n,m}：匹配前一个字符n次到m次之间

预定义字符

\d：数字字符相当于 $0-9$
\w:相当于 $a-zA-Z0-9_$ 中的任意字符
\D:非数字字符 $\^0-9$
\W:相当于 $\^a-zA-Z0-9_$
\s:匹配任意空白字符(空格，制表符，换行符等）
\S：匹配任意非空白字符

转义字符

\ : 转移特殊字符，使其失去特殊含义

\. : 就是.

用在邮箱上
复制代码
'[\w\.]+@[\w\.]+\.\w+'

？！正向取反

断言类型	语法	含义	示例
正向先行断言	?=Y	X后面必须跟着Y	\d(?=px) "1px"
正向后行断言	?<=Y	X前面必须是Y	(?<=Y\ $)\\d+ "$ 22"
负向先行断言	?!Y	X后面不能跟着Y	\d(?!px) "1"
负向后行断言	?<!Y	X前面不能是Y	(?<!\$)\d+ "22"

贪婪匹配和懒惰匹配

贪婪匹配就是尽可能多匹配

懒惰匹配就是最少次的匹配与贪婪模式的区别就是懒惰模式加了个 ?

比如

a.*\d 匹配"ab3ab3ab3" 中的 "ab3ab3ab3"

而 a.*?\d 匹配"ab3ab3ab3"中的"ab3";

分组和捕获

用() 隔开

复制代码

const reg =/^(\d{4})-(\d{2})-(\d{2})$/
const date = '2025-08-10';
console.log(reg.test(date));
//true
console.log(date.replace(reg,'$2/$3/$1') //   08/10/2025

分支结构

用 | 分开

复制代码

const st = "学前端找java"//true
const sr = "学java找前端"//true

const str = "学什么关我啥事"//false
const reg = /前端|java/
console.log(reg.test(st));
console.log(reg.test(sr));
console.log(reg.test(str));

做一些示例

复制代码

 //密码匹配  6-16位 数字或者下划线
        const pwdreg = /^\w{6,16}$/
        const pwd = 'Yang5866121_';
        console.log(pwdreg.test(pwd));

//匹配16进制的颜色板 #f1234f  #fff
        const reg = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/
        const color = '#f0ff0f'
        const color1 = '#aaa'
        const color2 = '#123aaa'
        const color3 = '#qqqqq'
        console.log(reg.test(color))
        console.log(reg.test(color1))
        console.log(reg.test(color2))
        console.log(reg.test(color3))

//24小时匹配  08:10 23:10 12:08
        //需要一个一匹配
        const reg = /^([01][0-9]|2[0-3]):[0-5][0-9]$/
        const time = '18:10'//true
        const time1 = '02:09'//true
        const time2 = '22:59';//true

//手机号脱敏
        //字符串的方法
        // const str = "13220302223"
//console.log(str.substring(0, 3) + '****' + str.substring(7, 11))
        // 正则表达式的方法

        const reg = /^(1[3-9]\d)(\d{4})(\d{4})$/
        const str = '15512725217';
        console.log(str.replace(reg, '$1****$3'))