js验证email的正则

2023年6月10日下午7:51 • JavaScript

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技术站