3种在JavaScript中验证电子邮件地址的方法

梦里梦外; 2022-09-16 11:13 149阅读 0赞

![647af4ac84a38a11bd0e391a59005bb4.png][]

来源 | http://www.fly63.com/

如何使用JavaScript验证email的正确性？今天这个内容将做一个小小的总结，希望对你有所帮助。

### **方式一：简单验证** ###

对于想要以以下形式进行真正简单验证的人

fly63@email.com

正则表达式：

/\S+@\S+\.\S+/

要防止匹配多个@ 符号（推荐使用）：

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

JavaScript 函数示例：

function validateEmail(email) {
       var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       return re.test(email);
    }
    console.log(validateEmail(fly63@email.com'));

这样能保证用户输入的邮箱没有明显的错误，绝大部分是正确的，而且效率是最高的。

### **方式二：官网标准** ###

官方标准称为RFC 2822。它描述了有效电子邮件地址必须遵守的语法。使用这个正则表达式来实现它：

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

如果我们省略使用双引号和方括号的语法，我们将获得更实用的 RFC 2822 实现。它仍然会匹配今天实际使用的所有电子邮件地址的 99.99%。

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?

### **方式三：html5表单验证** ###

html5 本身具有电子邮件验证功能。如果您的浏览器支持 HTML5，那么您可以使用以下代码。

只需检查输入的电子邮件地址是否有效或不使用 HTML，无需编写用于验证的函数。

需要注意的是：存在浏览器兼容性。

#  #

**学习更多技能**

**请点击下方公众号**

![831ab0652bc7209162b2f56193ad654c.gif][]

![a5839510cbf6be53f6cc284b13cff7bb.png][]

![6aea3bc61a55657483e24b47151477f5.png][]

[647af4ac84a38a11bd0e391a59005bb4.png]: /images/20220828/c7746aae56bb4a43adb860411426c283.png
[831ab0652bc7209162b2f56193ad654c.gif]: /images/20220828/67daaa7bad2448fd8e4a1b662a7aa98c.png
[a5839510cbf6be53f6cc284b13cff7bb.png]: /images/20220828/84912980d36c48b49ba8e89a1a5001c4.png
[6aea3bc61a55657483e24b47151477f5.png]: /images/20220828/6aab403a4dc24d9b91c321121c2d82fa.png