JS中正则校验规则.docVIP

JS中正则校验规则

各位前端开发者，今天咱们来唠唠JavaScript里头的正则校验规则。这可是个实用的技能，不管是做表单验证还是处理用户输入，正则校验都能帮上大忙。正则表达式，听起来挺高大上，其实用熟了，那就是手到擒来。接下来，我就给大家详细说说JS中正则校验的那些事儿。

一、正则表达式是啥

先得说说正则表达式是啥玩意儿。正则表达式，简单来说，就是一种用来匹配字符串的规则。就好比你有个字符串，你想找出里头有没有符合特定模式的内容，正则表达式就能帮你搞定。比如，你想找出一个字符串里有没有手机号码，用正则表达式一匹配，立马就能知道。

二、为啥要用正则校验

在前端开发里，正则校验特别有用。最常见的场景就是表单验证。比如，用户在注册页面填了个邮箱地址，你得验证这个邮箱地址是不是符合规范。要是用户填了个乱七八糟的东西，直接提交上去，后端可能就处理不了，还可能出bug。用正则校验，就能在前端就把这些问题拦下来，用户体验也能提升不少。

三、正则校验的基本用法

在JavaScript里，正则校验用起来挺方便。你可以直接用`RegExp`对象，也可以用正则字面量。比如，你想校验一个字符串是不是全是数字，可以用这样的正则表达式：

```javascript

letregex=/^[0-9]+$/;

console.log(regex.test(12345));//输出true

console.log(regex.test(abc123));//输出false

```

这段代码里，`/^[0-9]+$/`就是正则表达式，`^`表示字符串的开头，`$`表示字符串的结尾，`[0-9]+`表示一个或多个数字。用`test`方法一检测，就能知道字符串符不符合规则。

四、常见校验场景

正则校验能用在好多场景里，咱们来看看几个常见的。

1.校验手机号码

手机号码的格式大家都挺熟悉，国内的手机号码一般是11位数字，以1开头。用正则表达式来校验，可以这样写：

```javascript

letphoneRegex=/^1[3-9]\d{9}$/;

console.log(phoneRegex.test);//输出true

console.log(phoneRegex.test(1234567890));//输出false

```

这个正则表达式里，`^1`表示以1开头，`[3-9]`表示第二位数字是3到9之间的任意一个，`\d{9}`表示后面跟着9位数字。

2.校验邮箱地址

邮箱地址的格式也有规律，一般是用户名@域名。用正则表达式来校验，可以这样写：

```javascript

letemailRegex=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;

console.log(emailRegex.test(example@));//输出true

console.log(emailRegex.test());//输出false

```

这个正则表达式里，`^[^\s@]+`表示邮箱地址开头不能有空格和@符号，`@[^\s@]+`表示@符号后面跟着的域名也不能有空格和@符号，`\.[^\s@]+$`表示域名后面跟着一个点，点后面也不能有空格和@符号。

3.校验日期格式

日期格式也有好多种，比如`YYYY-MM-DD`这种。用正则表达式来校验，可以这样写：

```javascript

letdateRegex=/^\d{4}-\d{2}-\d{2}$/;

console.log(dateRegex.test(2024-05-26));//输出true

console.log(dateRegex.test);//输出false

```

这个正则表达式里，`^\d{4}`表示以4位数字开头，`-\d{2}-\d{2}$`表示后面跟着两个两位数字，中间用短横线分隔。

五、正则校验的高级用法

正则校验不只是简单的匹配，还有一些高级用法。比如，你可以用捕获组来提取字符串里的内容。捕获组就是用括号把正则表达式的一部分括起来，匹配成功后，这部分内容会被单独提取出来。

```javascript

letregex=/(\d{4})-(\d{2})-(\d{2})/;

letmatch=regex.exec(2024-05-26);

console.log(match[1]);//输出2024

console.log(match[2]);//输出05

console.log(match[3]);//输出26

```

这段代码里，`(\d{4})`、`(\d{2})`、`(\d{2})`就是捕获组，匹配成功后，`match[1]