首页 web前端 js教程 JS做出验证邮箱/邮件地址正则

JS做出验证邮箱/邮件地址正则

Jun 09, 2018 pm 02:09 PM
邮箱

这次给大家带来JS做出验证邮箱/邮件地址正则,JS做出验证邮箱/邮件地址正则的注意事项有哪些,下面就是实战案例,一起来看一下。

规则定义如下:

  • 以大写字母[A-Z]、小写字母[a-z]、数字[0-9]、下滑线[_]、减号[-]及点号[.]开头,并需要重复一次至多次[+]。

  • 中间必须包括@符号。

  • @之后需要连接大写字母[A-Z]、小写字母[a-z]、数字[0-9]、下滑线[_]、减号[-]及点号[.],并需要重复一次至多次[+]。

  • 结尾必须是点号[.]连接2至4位的大小写字母[A-Za-z]{2,4}。

利用以上规则给出如下正则表达式:

var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
登录后复制

完整测试代码

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>邮箱/邮件地址的正则表达式及分析(JavaScript,email,regex)</title>
</head>
<body>
<p id="main"></p>
<script>
  var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  w("pattern.test('cn42du@163.com') = "+pattern.test('cn42du@163.com')+";");
  w("pattern.test('ifat3@sina.com.cn') = "+pattern.test('ifat3@sina.com.cn')+";");
  w("pattern.test('ifat3.it@163.com') = "+pattern.test('ifat3.it@163.com')+";");
  w("pattern.test('ifat3_-.@42du.cn') = "+pattern.test('ifat3_-.@42du.cn')+";");
  w("pattern.test('ifat3@42du.online') = "+pattern.test('ifat3@42du.online')+";");
  w("pattern.test('毛三胖@42du.cn') = "+pattern.test('毛三胖@42du.cn')+";");
  function w(val) {
    document.getElementById("main").innerHTML += val +"<br />";
  }
</script>
</body>
</html>
登录后复制

测试结果:

pattern.test('cn42du@163.com') = true;
pattern.test('ifat3@sina.com.cn') = true;
pattern.test('ifat3.it@163.com') = true;
pattern.test('ifat3_-.@42du.cn') = true;
pattern.test('ifat3@42du.online') = false;
pattern.test('毛三胖@42du.cn') = false;
pattern.test('cn42du@163.com') = true;
pattern.test('ifat3@sina.com.cn') = true;
pattern.test('ifat3.it@163.com') = true;
pattern.test('ifat3_-.@42du.cn') = true;
pattern.test('ifat3@42du.online') = false;
pattern.test('毛三胖@42du.cn') = false;

方案1说明

方案1是最常用的邮件正则表达式验证方案,也适合大多数的应用场景。从以上测试可以看出,该表达式不支持.online及.store结尾的域名。如需兼容这类域名(大于4位),调整正则结尾{2,4}的限制部分即可(例:{2,8})。另一个问题是邮件用户名不能包括中文。

方案2 (修订方案1)

规则补充如下:

  • 用户名可以包括中文[\u4e00-\u9fa5]

  • 域名结尾最长可为8位{2,8}

  • 更新后的正则表达式如下:

var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
登录后复制

完整测试代码

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>邮箱/邮件地址的正则表达式及分析(JavaScript,email,regex)</title>
</head>
<body>
<p id="main"></p>
<script>
  var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
  w("pattern.test('cn42du@163.com') = "+pattern.test('cn42du@163.com')+";");
  w("pattern.test('ifat3@sina.com.cn') = "+pattern.test('ifat3@sina.com.cn')+";");
  w("pattern.test('ifat3.it@163.com') = "+pattern.test('ifat3.it@163.com')+";");
  w("pattern.test('ifat3_-.@42du.cn') = "+pattern.test('ifat3_-.@42du.cn')+";");
  w("pattern.test('ifat3@42du.online') = "+pattern.test('ifat3@42du.online')+";");
  w("pattern.test('毛三胖@42du.cn') = "+pattern.test('毛三胖@42du.cn')+";");
  function w(val) {
    document.getElementById("main").innerHTML += val +"<br />";
  }
</script>
</body>
</html>
登录后复制

测试结果:

pattern.test('cn42du@163.com') = true;
pattern.test('ifat3@sina.com.cn') = true;
pattern.test('ifat3.it@163.com') = true;
pattern.test('ifat3_-.@42du.cn') = true;
pattern.test('ifat3@42du.online') = true;
pattern.test('毛三胖@42du.cn') = true;

方案3 (安全)

在手机验证码出现之前,差不多邮箱验证是保证用户唯一性的唯一条件。而临时邮箱(也称10分钟邮箱或一次性邮箱)的出现,则使得邮箱验证及帐户激活这种机制失去了意义。而临时邮箱的地址是不可枚举的,我们只能才采取白名单的方式,只允许有限的邮箱域名通过验证。

根据方案1的补充如下规则:

邮箱域名只能是163.com,qq.com或者42du.cn。
给出正则表达式如下:

var pattern = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com|42du.cn)$/;
登录后复制

完整测试代码

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>邮箱/邮件地址的正则表达式及分析(JavaScript,email,regex)</title>
</head>
<body>
<p id="main"></p>
<script>
  var pattern = /^([A-Za-z0-9_\-\.])+\@(163.com|qq.com|42du.cn)$/;
  w("pattern.test('cn42du@163.com') = "+pattern.test('cn42du@163.com')+";");
  w("pattern.test('ifat3@sina.com.cn') = "+pattern.test('ifat3@sina.com.cn')+";");
  w("pattern.test('ifat3.it@163.com') = "+pattern.test('ifat3.it@163.com')+";");
  w("pattern.test('ifat3_-.@42du.cn') = "+pattern.test('ifat3_-.@42du.cn')+";");
  w("pattern.test('ifat3@42du.online') = "+pattern.test('ifat3@42du.online')+";");
  w("pattern.test('毛三胖dd@42du.cn') = "+pattern.test('毛三胖@42du.cn')+";");
  function w(val) {
    document.getElementById("main").innerHTML += val +"<br />";
  }
</script>
</body>
</html>
登录后复制

测试结果:

pattern.test('cn42du@163.com') = true;
pattern.test('ifat3@sina.com.cn') = false;
pattern.test('ifat3.it@163.com') = true;
pattern.test('ifat3_-.@42du.cn') = true;
pattern.test('ifat3@42du.online') = false;
pattern.test('毛三胖dd@42du.cn') = false;
登录后复制

方案3验证虽然能保证安全性,但是如果白名单太长会造成模式字符串太长。这时可以将邮箱域名白名单写成数组,利用正则表达式做初步验证,用白名单做域名的二次验证。

现给出邮箱验证函数如下:

var isEmail = function (val) {
  var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  var domains= ["qq.com","163.com","vip.163.com","263.net","yeah.net","sohu.com","sina.cn","sina.com","eyou.com","gmail.com","hotmail.com","42du.cn"];
  if(pattern.test(val)) {
    var domain = val.substring(val.indexOf("@")+1);
    for(var i = 0; i< domains.length; i++) {
      if(domain == domains[i]) {
        return true;
      }
    }
  }
  return false;
}
// 输出 true
isEmail(cn42du@163.com);
登录后复制

上述isEmail()函数列举了常用的11种邮箱域名,大家可以根据需要适当补充或删减。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

axios中的302状态码

封装Vue2路由导航钩子并在实战中使用

以上是JS做出验证邮箱/邮件地址正则的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

gate.io新手注册教程 gate.io新手注册教程 Mar 31, 2025 pm 11:09 PM

本文提供了一份详细的Gate.io新手注册教程,涵盖了从访问官网到完成注册的每一个步骤,包括填写注册信息、进行验证、阅读用户协议等。文章还强调了注册成功后的安全措施,如设置二次验证和完成实名认证,并给出了新手提示,帮助用户安全地开启数字资产交易之旅。

gate.io新手最新注册教程 gate.io新手最新注册教程 Mar 31, 2025 pm 11:12 PM

这篇文章为新手提供了详细的Gate.io注册教程,指导他们逐步完成注册流程,包括访问官网、填写信息、身份验证等,并强调了注册后的安全设置。此外,文章还提到了币安、欧易和芝麻开门等其他交易所,建议新手根据自身需求选择合适的平台,并提醒读者数字资产投资具有风险,应理性投资。

在Laravel中如何获取邮件发送失败时的退信代码? 在Laravel中如何获取邮件发送失败时的退信代码? Apr 01, 2025 pm 02:45 PM

Laravel邮件发送失败时的退信代码获取方法在使用Laravel开发应用时,经常会遇到需要发送验证码的情况。而在实�...

在 Laravel 中,如何处理邮件发送验证码失败的情况? 在 Laravel 中,如何处理邮件发送验证码失败的情况? Mar 31, 2025 pm 11:48 PM

Laravel邮件发送验证码失败时的处理方法在使用Laravel...

gate.io网页版最新注册教程 gate.io网页版最新注册教程 Mar 31, 2025 pm 11:15 PM

本文提供了一份详细的Gate.io网页版最新注册教程,帮助用户轻松入门数字资产交易。教程涵盖了从访问官网到完成注册的各个步骤,并强调了注册后的安全设置。文章还简单介绍了币安、欧易和芝麻开门等其他交易平台,建议用户根据自身需求选择合适的平台,并注意投资风险。

如何在Bitget官网注册并下载最新App 如何在Bitget官网注册并下载最新App Mar 05, 2025 am 07:54 AM

本指南提供了 Bitget 交易所官方 App 的详细下载和安装步骤,适用于安卓和 iOS 系统。指南整合了来自多个权威来源的信息,包括官网、App Store 和 Google Play,并强调了下载和账户管理过程中的注意事项。用户可以从官方渠道下载 App,包括应用商店、官网 APK 下载和官网跳转,并完成注册、身份验证和安全设置。此外,指南还涵盖了常见问题和注意事项,例如

欧易官方网站最新注册入口 欧易官方网站最新注册入口 Mar 21, 2025 pm 05:54 PM

欧易OKX作为全球领先的数字资产交易平台,以其丰富的交易产品、强大的安全保障和便捷的用户体验吸引众多投资者。然而,网络安全风险日益严峻,如何安全注册欧易OKX官方账户至关重要。本文将提供欧易OKX官方网站最新注册入口,并详细讲解安全注册的步骤和注意事项,包括如何识别官方网站、设置强密码、开启双重验证等,帮助您安全便捷地开启数字资产投资之旅。请注意,数字资产投资存在风险,请谨慎决策。

欧易okex账号怎么注册、使用、注销教程 欧易okex账号怎么注册、使用、注销教程 Mar 31, 2025 pm 04:21 PM

本文详细介绍了欧易OKEx账号的注册、使用和注销流程。注册需下载APP,输入手机号或邮箱注册,完成实名认证。使用方面涵盖登录、充值提现、交易以及安全设置等操作步骤。而注销账号则需要联系欧易OKEx客服,提供必要信息并等待处理,最终获得账号注销确认。 通过本文,用户可以轻松掌握欧易OKEx账号的完整生命周期管理,安全便捷地进行数字资产交易。

See all articles