使用常规表达式可能是最好的方式. 你可以在这里看到大量的测试(从<unk>取出)

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,}))$/
    );
};

下面是接受单码的常规表达式的例子:

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

但是,请记住,我们不应该只依靠JavaScript验证,JavaScript可以轻松禁用,这也应该在服务器侧验证。

下面是行动中的上述例子:

在我的情况下,我想避免 ~ 和 # 这就是为什么我使用了另一个解决方案:

function validEmail(email){
  const regex = /^((?!\.)[\w\-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/;
  return regex.test(email);
}

这个问题比一眼看起来更难回答。

世界各地有大量的人正在寻找“统治他们所有”,但事实是,有大量的电子邮件提供商。

为什么? 根据 RFC: https://en.wikipedia.org/wiki/Email_address#RFC_specification。

The local-part of the email address may use any of these ASCII characters:

- uppercase and lowercase Latin letters A to Z and a to z;
- digits 0 to 9;
- special characters !#$%&'*+-/=?^_`{|}~;
- dot ., provided that it is not the first or last character unless quoted, and provided also that it does not appear consecutively unless quoted (e.g. John..Doe@example.com is not allowed but "John..Doe"@example.com is allowed);[6]
Note that some mail servers wildcard local parts, typically the characters following a plus and less often the characters following a minus, so fred+bah@domain and fred+foo@domain might end up in the same inbox as fred+@domain or even as fred@domain. This can be useful for tagging emails for sorting, see below, and for spam control. Braces { and } are also used in that fashion, although less often.
- space and "(),:;<>@[\] characters are allowed with restrictions (they are only allowed inside a quoted string, as described in the paragraph below, and in addition, a backslash or double-quote must be preceded by a backslash);
- comments are allowed with parentheses at either end of the local-part; e.g. john.smith(comment)@example.com and (comment)john.smith@example.com are both equivalent to john.smith@example.com.

A__z/J0hn.sm{it!}h_comment@example.com.co

如果你尝试这个地址我赌它将失败在所有的或大部分的regex发布在整个网络上. 但记住这个地址遵循RFC规则,所以它是公平有效的。

想象一下我的失望,因为我无法在任何地方注册与这些 regex 检查!!!

如何处理,是的?

"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com

在这样做时,一个好做法是“重新输入您的电子邮件”输入,以避免用户输入错误,如果这对您来说不够,请添加一个提前提交的模型窗口,标题为“这是您的当前电子邮件吗?”然后用户输入的电子邮件在一个H2标签中,您知道,清楚地显示他们输入的电子邮件,然后一个“是的,提交”按钮。

Rnevius的(和同事)解决方案是辉煌的,但它允许添加Cyrillic,日本语,Emoticons和其他单码符号,一些服务器可能受到限制。

<unk> <unk> <unk> <unk> <unk> <unk> <unk> <unk>

<unk> <unk> <unk> <unk> <unk> <unk> <unk> <unk>

使用 JavaScript 中的 URL 接口将地址分成最小实用的预期格式 user@host 然后检查它看起来合理。 接下来发送一个消息,看看它是否工作(例如,需要接收者通过地址验证一次标志)。 请注意,这处理处罚代码,国际化,如下示例所示。

https://developer.mozilla.org/en-US/docs/Web/API/URL

一个简单的测试:

function validEmail(input=''){
    const emailPatternInput = /^[^@]{1,64}@[^@]{4,253}$/, emailPatternUrl = /^[^@]{1,64}@[a-z][a-z0-9\.-]{3,252}$/i;
    let email, url, valid = false, error, same = false;
    try{
        email = input.trim();
        // handles punycode, etc using browser's own maintained implementation
        url = new URL('http://'+email);
        let urlderived = `${url.username}@${url.hostname}`;
        same = urlderived === email;
        valid = emailPatternInput.test( email );
        if(!valid) throw new Error('invalid email pattern on input:' + email);
        valid = emailPatternUrl.test( urlderived );
        if(!valid) throw new Error('invalid email pattern on url:' + urlderived);
    }catch(err){
        error = err;
    };
    return {email, url, same, valid, error};
}

[
 'user+this@はじめよう.みんな'
, 'stuff@things.eu'
, 'stuff@things'
, 'user+that@host.com'
, 'Jean+François@anydomain.museum','هيا@יאללה'
, '试@例子.测试.مثال.آزمایشی'
, 'not@@really'
, 'no'
].forEach(email=>console.log(validEmail(email), email));

下面是一个解决方案,它工作,并包括验证 / 通知的幻觉性,以以下形式:

您可以在此链接上运行

雅加达

(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
      }
      form.classList.add('was-validated');
      event.preventDefault();              
    }, false);
  }, false);
})();

HTML

<p class='title'>
    <b>Email validation</b>
  <hr size="30px;">
</p>
<br>

<form id="needs-validation" novalidate>
  <p class='form_text'>Try it out!</p>
  <div class="form-row">
    <div class="col-12">
      <input type="email" class="form-control" placeholder="Email Address" required>
        <div class="invalid-feedback">
          Please enter a valid email address.
        </div>
    </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" 
          class="btn btn-default btn-block">Sign up now
      </button>
    </div>
   </div>
</form>