正则表达式在JS中的应用，判断邮箱是否合法

姓蔡小朋友

已于 2022-10-12 21:03:25 修改

阅读量432

点赞数

分类专栏： JavaScript 文章标签：正则表达式 javascript 开发语言

于 2022-08-31 21:21:54 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126631176

版权

正则表达式邮箱验证正则语法 test方法邮箱格式

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、什么是正则表达式：

正则表达式主要用在字符串格式匹配方面。
如邮箱地址格式。
正则表达式是一门独立的学科，java中支持，c语言中支持，JavaScript也支持。
网络上具有大部分需要的正则表达式。

二、正则表达式基本符号：

. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
\W 匹配任意不是字母，数字，下划线，汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
[1-9]表示1-9中的任意一个数字
[0-9A-Za-z]表示0-9A-Za-z中的任意一个数字
[+-.]表示±.中的任意数字
|表示或
正则表达式中()优先级较高

三、简单的正则表达式：

QQ号：^[1-9][0-9]{4,}$表示1-9的任意一个数字作为开始。往后是0-9的任意一个数字，重复4或更多次。

四、创建正则表达式，调用方法：

第一种方式：

var reg = /正则表达式或字符串/flags;

第二种方式：

var reg = new RegExp("正则表达式","flags");//RegExp对象

关于flags:
- g:全文查找出现的所有"正则表达式"
- i:忽略大小写
- m:多行查找，如果前面是正则表达式则不能用m，只有前面是字符串才能用m
正则表达式对象.test(需要匹配的数据)方法：
返回true表示数据格式正确，false不正确。

五、例子：判断邮箱是否合法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM编程-关于正则表达式</title>
	</head>
	<body>
		<script type="text/javascript">
		   window.onload = function(){
			   // 给按钮绑定click
			   document.getElementById("btn").onclick = function(){
				   var email = document.getElementById("email").value;
				   var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				   var ok = emailRegExp.test(email);
				   if(ok){
						//合法
						document.getElementById("emailError").innerText = "邮箱地址合法";
				   }else{
					   // 不合法
					   document.getElementById("emailError").innerText = "邮箱地址不合法";
				   }
			   }
			   // 给文本框绑定focus
			   document.getElementById("email").onfocus = function(){
				   document.getElementById("emailError").innerText = "";
			   }
		   }
		   
		</script>
		
		<input type="text" id="email" />
		<span id="emailError" style="color: red; font-size: 12px;"></span>
		<br>
		<input type="button" value="验证邮箱" id="btn" />
	</body>
</html>