首页 > HTML > 如何在 JavaScript 中验证电子邮件地址?

如何在 JavaScript 中验证电子邮件地址?

上一篇 下一篇

我想在将用户输入发送到服务器或尝试向其发送电子邮件之前检查用户输入是否是 JavaScript 中的电子邮件地址,以防止最基本的错误输入。我怎样才能做到这一点?

分割线

网友回答:

我稍微修改了Jaymon的答案,供那些想要以以下形式进行非常简单验证的人使用:

anystring@anystring.anystring

正则表达式:

/^S+@S+.S+$/

要防止匹配多个 @ 符号,请执行以下操作:

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

上面的正则表达式匹配整个字符串,如果要匹配字符串中的任何位置,请删除前导和尾随。下面的示例匹配字符串中的任何位置^$

如果你确实想匹配整个振铃,你可能想先匹配字符串。trim()

JavaScript 函数示例:

function validateEmail(email) {
  var re = /S+@S+.S+/;
  return re.test(email);
}
    
console.log(validateEmail('my email is anystring@anystring.any')); // true
    
console.log(validateEmail('my email is anystring@anystring .any')); // false

分割线

网友回答:

使用正则表达式可能是最好的方法。你可以在这里看到一堆测试(取自铬)

const validateEmail = (email) => {
  return String(email)
    .toLowerCase()
    .match(
      /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
    );
};

下面是接受 unicode 的正则表达式的示例:

const re =
  /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i;

但请记住,不应仅依赖 JavaScript 验证。JavaScript可以很容易地被禁用。这也应该在服务器端进行验证。

以下是上述操作的示例:

const validateEmail = (email) => {
  return email.match(
    /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
  );
};

const validate = () => {
  const $result = $('#result');
  const email = $('#email').val();
  $result.text('');

  if (validateEmail(email)) {
    $result.text(email + ' is valid :)');
    $result.css('color', 'green');
  } else {
    $result.text(email + ' is not valid :(');
    $result.css('color', 'red');
  }
  return false;
}

$('#email').on('input', validate);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="email">Enter an email address: </label>
<input id="email" />
<h2 id="result"></h2>

分割线

网友回答:

为了完整起见,这里有另一个符合 RFC 2822 的正则表达式

官方标准称为RFC 2822。它描述了有效电子邮件地址必须遵守的语法。你可以(但你不应该 – 继续阅读)用这个正则表达式实现它:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|\[x01-x09x0bx0cx0e-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-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|\[x01-x09x0bx0cx0e-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])?

您可以进行的进一步更改是允许任何两个字母的国家/地区代码顶级域,并且仅允许特定的通用顶级域。此正则表达式过滤虚拟电子邮件地址,如 asdf@adsf.adsf添加新的顶级域时,您需要对其进行更新

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+(?:[A-Z]{2}|com|org|net|gov|mil|biz|info|mobi|name|aero|jobs|museum)b

因此,即使遵循官方标准,仍然需要做出权衡。不要盲目复制在线库或论坛中的正则表达式。始终使用您自己的数据和您自己的应用程序对其进行测试。

强调我的

模板简介:该模板名称为【如何在 JavaScript 中验证电子邮件地址?】,大小是暂无信息,文档格式为.编程语言,推荐使用Sublime/Dreamweaver/HBuilder打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 229次
  • 使用软件 Sublime/Dreamweaver/HBuilder
  • 文件格式 编程语言
  • 文件大小 暂无信息
  • 上传时间 03-08
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
微信模板 微信文章 html5 响应式 微信素材 微信公众平台 微信图片 自适应 单页式简历模板 企业网站
您可能会喜欢的其他模板