首頁 > web前端 > js教程 > JS做出驗證郵箱/郵件地址正規

JS做出驗證郵箱/郵件地址正規

php中世界最好的语言
發布: 2018-06-09 14:09:18
原創
6158 人瀏覽過

這次帶給大家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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板