如何使用纯js代码校验email地址(非正则表达式)？

Question

我想在使用表单校验email的时候，提示详细的错误格式信息。

邮箱的规则是：名称@域名。

• @符号只能有1个。
• 邮箱名称的规则：由英文字母、数字、和指定特殊字符组成。
• 邮箱域名的规则：由英文字母、数字、下划线、"."组成。一般常见的域名都是一级域名，例如[e-mail]，还有很多其他的多级域名，例如[e-mail]

我的期望效果：

用户输入的email不符合以上3种规则，则给出相应的提示。

例如：9999@@www.com. //提示@符号只能有1个。

Answer 1

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

function validateEmail(email) {
  // 检查 @ 符号的数量
  if (email.indexOf('@') !== email.lastIndexOf('@')) {
    return '@符号只能有一个。';
  }

  // 检查邮箱名称是否只包含允许的字符
  const name = email.split('@')[0];
  if (!/^[a-zA-Z0-9._-]+$/.test(name)) {
    return '邮箱名称必须由英文字母、数字、下划线、点、或减号组成。';
  }

  // 检查域名是否只包含允许的字符
  const domain = email.split('@')[1];
  if (!/^[a-zA-Z0-9_.-]+$/.test(domain)) {
    return '域名必须由英文字母、数字、下划线、点、或减号组成。';
  }

  // 检查域名是否至少包含两个字母
  if (!/[a-zA-Z]{2,}/.test(domain)) {
    return '域名必须至少包含两个字母。';
  }

  // 如果 email 符合规则，则返回空字符串
  return '';
}

Answer 2

为啥不直接用这个标签呢？

<input type="email">

可以通过以下几个方法校验

input.validationMessage // 提示信息
input.checkValidity() //检查是否合法
input.validity //校验的完整信息

Answer 3

很蛋疼不用正则

Answer 4

function isValidEmail(email) {
  // 使用字符串的 split 方法将电子邮件地址拆分为两部分：用户名和域名
  const [username, domain] = email.split("@");

  // 如果用户名或域名为空，说明电子邮件地址无效
  if (!username || !domain) {
    return false;
  }

  // 如果域名中不包含 .，说明电子邮件地址无效
  if (!domain.includes(".")) {
    return false;
  }

  // 否则，电子邮件地址有效
  return true;
}