JavaScript 如何校验邮箱

在日常上网时，大家几乎都填过邮箱：注册账号、找回密码、收快递验证码……几乎所有线上场景都要用到邮箱。而你肯定也见过“请填写正确的邮箱格式”的提示——这就是前端在做邮箱校验，JavaScript就是实现这个功能的常用工具。

很多人觉得“校验邮箱”是个复杂的技术活，其实只要把它拆解成几个简单的小规则，用JavaScript就能轻松实现，甚至你自己写的代码，就能帮网页拦住99%的错误邮箱。

先搞懂：一个“合格”的邮箱长啥样？

要校验邮箱，先得知道正确的邮箱格式是什么。咱们用生活里的快递地址举例子：一个完整的邮箱就像寄给朋友的快递，得有三个关键部分，缺一个都寄不出去：

• 收件人标识（用户名）：就像快递上的收件人名字，得是一串字符，不能是空的，也不能全是乱码；
• 分隔符：就像快递上的“@”，必须是这个符号，不能换成别的，比如“#”“$”都不行；
• 域名后缀：就像快递要寄的地方（比如北京朝阳区），必须有一个后缀，比如常见的@qq.com、@163.com，也可能是@edu.cn、@gmail.com，后缀不能少，也不能随便写。

举几个例子：

✅ 正确邮箱：xiaoming123@163.com（有名字、@、域名）

❌ 错误邮箱：xiaoming163.com（缺@）、xiaoming@.com（域名是空的）、xiaoming@qq（缺后缀的.com）

用JavaScript一步步做邮箱校验

JavaScript做校验，核心是“检查输入的字符串是否符合刚才的规则”，不用复杂的代码，只需要两步就能实现，普通人也能看懂：

第一步：先把用户输入的邮箱“拆成三段”

我们可以用JavaScript的split()方法，把用户输入的邮箱按“@”切开，分成两部分：比如xiaoming123@163.com切开后，会变成["xiaoming123", "163.com"]。如果切开后只有1段，说明没有@，直接判定为错误；如果有2段，就继续检查；如果有3段以上（比如有两个@），也直接判定错误。

举个生活化的例子：把“小明@163.com”按“@”切开，就像把“小明的名字和地址”分开，要是切出来有两个以上的“块”，就相当于快递地址里出现了两个收件人，肯定不对。

第二步：检查两段内容的“合法性”

切开后得到的两段，分别检查规则：

• 第一段（用户名）：不能是空的，也不能只有空格，比如输入 @163.com，前面是空的，就不合格；
• 第二段（域名）：得有“点”，比如163.com里有.，而163com就没有；而且点不能在开头或结尾，比如.com或者163.都不对，就像快递地址不能只写“朝阳区”或者“北京.”，得是“北京朝阳区”这种完整的地址结构。

举个实际的代码小片段（不用怕复杂，只看逻辑就行）：

`javascript

function checkEmail(email) {

// 按@切开

const parts = email.split('@');

// 必须有且只有一个@，分成2段

if (parts.length !== 2) return false;

const [username, domain] = parts;

// 用户名不能空，域名必须有点，且点不在首尾

return username.trim() !== '' && domain.includes('.') && !domain.startsWith('.') && !domain.endsWith('.');

}

`

这个小函数，只要输入正确的邮箱就返回true，错误的就返回false，足够应付日常大部分场景。

别踩坑：为什么不能只靠前端校验？

很多人可能会问：“我写了这个校验，是不是就不会有错误邮箱了？”其实不是——刚才的校验只是“格式对”，但不能保证“这个邮箱真的存在”，比如你填xiaoming123@qq.com，格式是对的，但如果这个邮箱没人用，还是收不到验证码。

所以前端用JavaScript做格式校验，只是帮用户“少填错”，真正的邮箱真实性验证，要靠后端发验证码的步骤：比如填完邮箱后，点“发送验证码”，后端会给这个邮箱发邮件，只有收到验证码，才证明这个邮箱是真的。

简单说：前端校验是“拦错”，后端验证是“验真”，两者搭配用，才是完整的邮箱校验逻辑。

最后再给大家提个醒：平时填邮箱的时候，别随便写一串字符，要记得加@和正确的域名，这样不仅能过前端的校验，也能保证收到重要的邮件。