当前位置：首页 > JavaScript

js 实现邮箱

2026-02-02 03:15:11JavaScript

邮箱验证正则表达式

使用正则表达式验证邮箱格式是常见方法。以下是一个较为全面的JavaScript邮箱验证正则表达式：

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
function validateEmail(email) {
  return emailRegex.test(email);
}

该正则表达式匹配大多数标准邮箱格式，包括：

允许大小写字母、数字以及特殊字符._%+-
必须包含@符号
域名部分允许字母、数字和连字符
顶级域名至少2个字符

完整的邮箱验证函数

更健壮的验证应包含额外检查：

js 实现邮箱

function validateEmailComplete(email) {
  if (!email) return false;

  const parts = email.split('@');
  if (parts.length !== 2) return false;

  const [localPart, domain] = parts;
  if (!localPart || !domain) return false;

  // 检查域名部分是否包含点
  if (domain.indexOf('.') === -1) return false;

  // 检查顶级域名长度
  const domainParts = domain.split('.');
  const tld = domainParts[domainParts.length - 1];
  if (tld.length < 2) return false;

  return /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email);
}

HTML5内置验证

现代浏览器支持原生邮箱验证：

<input type="email" required>

这种方法简单但验证规则因浏览器而异，建议配合JavaScript验证使用。

js 实现邮箱

服务端二次验证

前端验证可被绕过，必须进行服务端验证：

// Node.js示例
const validator = require('validator');
function serverSideValidation(email) {
  return validator.isEmail(email);
}

常见问题处理

处理用户输入时应考虑：

去除前后空格：email.trim()
统一转换为小写：email.toLowerCase()
处理IDN国际化域名（包含非ASCII字符）

实时验证反馈

提供即时验证反馈提升用户体验：

document.getElementById('email').addEventListener('input', (e) => {
  const isValid = validateEmail(e.target.value);
  e.target.style.borderColor = isValid ? 'green' : 'red';
});