JS验证 Email 的正则表达式是一项很重要的前端技能，本篇攻略旨在帮助想要掌握这项技能的读者们进行学习。
1. 什么是正则表达式
正则表达式是一种特殊的文本字符串，用于在文本中查找、替换和匹配符合某些特定规则的字符串。利用正则表达式可以简化很多复杂的字符串操作，使代码更加简洁高效。
2. 邮箱正则表达式规则
验证Email的正则表达式需要遵循RFC 5322 标准中的规则，其主要原则如下：
- Email 由两部分组成，分别为local-part 和 domain-part。其格式应为：local-part@domain-part.tld
- local-part仅限制字符A-Za-z0-9.-，也就是说，local-part中允许存在”.”,”-“ 和””三种符号
- domain-part和tld都不能包含特殊字符
- domain-part最多包含一级和二级域名
- 最后一级域名（tld）包含2~6个英文字符
基于以上规则，我们可以得到验证Email的正则表达式：
/^[\w-]+(\.[\w-]+)*@[a-zA-Z0-9]+([_-]?[a-zA-Z0-9])*((\.[a-zA-Z]{2,6}){1,2})$/
3. Email正则表达式解析
上面的正则表达式看起来很长，有一点点难理解，下面我将一步一步地解析正则表达式的含义。
/^ 开始符号，表示正则表达式的开始。
[\w-]+ 匹配字符集合，包含A-Za-z0-9.-_，+表示匹配至少一次。
(\.[\w-]+)* 匹配下一个字符集合，也就是“.”后面的字母集合，并加上前缀“\”。由于一个Email地址中可以有多个“.”，因此使用“*”表示匹配0个或多个。
@ 匹配字面值，只能匹配一个“@”字符。
[a-zA-Z0-9]+ 匹配由a-z、A-Z 和 0-9 组成的字符串，+表示匹配至少一次。
([_-]?[a-zA-Z0-9])* 匹配同上，但允许在前面增加-和_。
((\.[a-zA-Z]{2,6}){1,2}) 匹配网址的一级和二级域名，正则表达式使用“.”表示“.”的字符。另外，tld的字符长度为2~6，可以将匹配的“.{2,6}”放在“.XXX”中，由于tld最多包含两段，因此使用“{1,2}”。
$ 结束符号，表示正则表达式的结束。
4. 使用示例
接下来，我们将结合两个具体的使用示例来加深对上述正则表达式的理解。
示例1
通过一个简单的表单来验证用户输入的Email地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>验证Email的正确性</title>
</head>
<body>
<form method="post">
<p>填写Email地址：<input type="text" name="email"></p>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
var emailReg = /^[\w-]+(\.[\w-]+)*@[a-zA-Z0-9]+([_-]?[a-zA-Z0-9])*((\.[a-zA-Z]{2,6}){1,2})$/;
var btn = document.getElementsByTagName('input')[1];
btn.onclick = function() {
var email = document.getElementsByName('email')[0];
if (!emailReg.test(email.value)) {
alert('请输入正确的邮箱地址！');
return false;
}
}
</script>
</body>
</html>
示例2
获取文本区域内含有的Email地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取文本区域内含有的Email地址</title>
</head>
<body>
<div contenteditable="true" id="content" style="height:200px;width:80%;border:1px solid gray;padding:10px;">
输入Email地址：<strong>email@example.com</strong>
</div>
<button onclick=" getEmails()">获取Email地址</button>
<script type="text/javascript">
var emailReg = /^[\w-]+(\.[\w-]+)*@[a-zA-Z0-9]+([_-]?[a-zA-Z0-9])*((\.[a-zA-Z]{2,6}){1,2})$/;
function getEmails() {
var content = document.getElementById('content').innerHTML;
var emails = content.match(/[\w-]+(\.[\w-]+)*@[a-zA-Z0-9]+([_-]?[a-zA-Z0-9])*((\.[a-zA-Z]{2,6}){1,2})/g);
alert('获取到的Email地址：\n' + emails.join('\n'));
}
</script>
</body>
</html>
以上就是验证 Email 的正则表达式的完整攻略，希望对大家有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js验证email的正则 - Python技术站
微信扫一扫 
支付宝扫一扫 