JS正则对象（正则表达式）方法属性总结及表单验证例题

本文链接：https://blog.csdn.net/m0_63851202/article/details/121595916

正则表达式是一个描述字符规则的对象。

前端往往有大量的表单数据校验的工作，采用正则表达式会使得数据校验的工作量大大减轻，如邮箱验证，手机号码，等等。

正则表达式的组成：普通字符+特殊字符

正则的创建

构造方法

let reg=new RagExp("格式控制字符串"，"修饰符")

字面量方法

let reg=/格式控制字符串/修饰符

eg：let reg=new RagExp("a") 至少包含一个a

let reg=/a/

let reg=/^a$/只能是a，并且是一个

let reg=l/^a+$/只能是a，至少是一个

特殊符号

单个字符

^：正则开始

$ : 正则结束

. : 元字符, 表示任意一个字符

\. : 表示转义字符 \.表示.

+：表示其前面紧挨着的字符至少出现1次等价{1,}

* ：表示其前面出现的字符至少出现过0次等价{0,}

?: 表示其前面出现的字符至少出现过0次，至多1次等价{0,1}

| : 表示或者

组合字符

\d : 0-9之间的任意一个数字 \d只占一个位置

\D : 除了\d

\w : 数字，字母，下划线 0-9 a-z A-Z _

\W : 除了\w

\s : 空格或者空白等

\S : 除了\s

括号

{m,n}表示括号前面紧挨着的字符至少出现m个，至多出现n个

{m}表示括号前面紧挨着的字符只能出现m个

{m,}表示括号前面紧挨着的字符至少出现m个

[ ] 表示括号内的任意一个字符[wd3h]

[a-z]表示任意一个小写字母 [a-zA-Z0-9]

[^ ]表示非括号内的任意一个字符

格式控制字符串例题：

必须以b开头，从第二位起至少3个a，至多5个a

/^ba{3,5}$/

必须是5，只能是6位

/^5{6}$/

必须是0-9的数字，只能是6位

/^\d{6}$/

必须是一个由字母或数字或下划线组成的用户名，并且只能在6-18位之间

/^\w{6,18}$/

定义一个由字母或数字或下划线组成的用户名，并且首字母不为数字，并且只能在6-18位之间

/^\D\w{5,17}$/

密码，可以输入所有的字符，并且至少是6位

/^.{6,}$/

手机号以13、15、16开头的11位数字

/^1[356]\d{9}$/

只能输入一位所有小写所有大写，所有数字之间的值

/^[a-zA-Z0-9]$/

只能输入一位除了1ab之外的数

/^[^1ab]$/

只能输入两个中文

/^[\u4e00-\u9fa5]$/

正则对象相关方法

ps：不要带^$,带全局修饰符g

test

功能：判断某个目标字符串是否符合该正则对象的格式

参数：reg.test（目标字符串）

返回值：布尔值

exec

功能：将目标字符串中满足格式的字符返回

参数：reg.exec(目标字符串)

返回值：返回满足正则对象格式的子串，存储在一个长度为1的数组中

一些string的方法

match

功能：使用正则表达式对字符串执行查找并返回符合条件内容

参数：str.match(reg)

返回值：将包含查找内容的结果作为数组返回，能够找到所有满足正则条件的字符，并全部保存至一个数组

例题

        let reg=/\D/g;
        var str="123d45631f";
        console.log(str.match(reg))

search

功能：查找与正则表达式条件满足的第一个字符串的位置

参数：str.search(reg)

返回值：返回与正则表达式条件满足的第一个字符串的位置，找不到返回-1

例题:

         let str="wo shi GeBi de lao wang";
         let reg=/gebi/i;
         console.log(str.search(reg));
        （这里用全局没有用，只能返回第一个找到的字符）

replace

功能：返回根据正则表达式进行文字替换后的字符串

参数：str.replace(reg,"替换内容")

返回值：新字符串

例题

        let reg=/laowang/ig;
        let str="laowang的隔壁住着laowang";
        console.log(str.replace(reg,"xiaowang"))

修饰符

i:忽略大小写

g:全局

正则的应用

表单的验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="tiao.html" method="get">
			<input type="text" name="" id="" value="" placeholder="请输入用户名" /><span></span><br>
			<input type="text" name="" id="" value="" placeholder="请输入密码" /><span></span><br>
			<input type="submit" name="" id="" value="提交" />
		</form>
	</body>
</html>
<script type="text/javascript">
	let xinput = document.querySelectorAll("input");
	let xspan = document.querySelectorAll("span");
	let xform = document.querySelector("form");
	let flagid = null;
	let flagwd = null;
	xinput[0].onblur = () => {
		let reg = /^\D\w{5,10}$/;
		if (reg.test(xinput[0].value)) {
			xspan[0].innerHTML = `输入格式正确`;
			flagid = true;
		} else {
			xspan[0].innerHTML = `格式有误`;
			xinput[0].value = "";
			flagid = false;
		}
	}
	xinput[1].onblur = () => {
		let reg1 = /^\d+$/;
		let reg2 = /^[a-zA-Z]+$/;
		let reg3 = /^[!@#$%]+$/;
		let reg4 = /\d/;
		let reg5 = /[a-zA-Z]/;
		let reg6 = /[!@#$%]/;
		if (reg1.test(xinput[1].value) || reg3.test(xinput[1].value) || reg3.test(xinput[1].value)) {
			xspan[1].innerHTML = `密码强度低`;
			flagwd = false;
		} else if (reg4.test(xinput[1].value) && reg5.test(xinput[1].value) && reg6.test(xinput[1].value)) {
			xspan[1].innerHTML = `密码强度高`;
			flagwd = true;
		} else {
			xspan[1].innerHTML = `密码强度中`;
			flagwd = true;
		}
	}
	xform.onsubmit = () => {
		if (flagid && flagwd) {
			return true;
		} else {
			return false;
		}
	}
</script>