使用HTML5验证多个电子邮件地址

Question

我将尝试构建一个电子邮件表单，该表单以多个逗号分隔的电子邮件作为输入，并使用HTML5验证它们。我想使用以下正则表达式对输入进行合理性检查：

\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b

以下是我的尝试：

这似乎只适用于一个，对于多个无效：

<input type="email" pattern="\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b" value="" multiple>

这个有效，但仅执行内置电子邮件验证，似乎类似于.+@.+。

<input type="email" value="" multiple>

有没有一种方法可以混合模式和多重匹配，使正则表达式检查逗号分隔列表中的每个项目？

我这里有一个示例：http://codepen.io/ben336/pen/ihjKA

- Ben McCormick

---

尝试在最后一个\b之前将((, )|(,)?)添加到您的正则表达式中。未经测试。 - DontVoteMeDown

不，似乎没有帮助。 - Ben McCormick

我在最近的Web应用程序中处理这个问题的方式是将列表拆分，然后验证拆分数组中的每个元素。 - Jason Sperske

Answer 1

试一下这个：

<input type="email" multiple pattern="^([\w+-.%]+@[\w-.]+\.[A-Za-z]{2,4},*[\W]*)+$" value="">

更新:

使用<input type="email" value="" multiple>似乎存在错误，可以让"a@b"这样的电子邮件地址通过。尽管我会选择这种方法来保持语义，就像你所说的那样，并且仅仅为了确保没有人试图提交类似于"a@b"的电子邮件，同时在服务器端使用验证。

需要注意的是，出于安全原因，您应始终在服务器端进行验证，因为客户端验证很容易被绕过。

- Ryan

---

你为什么认为 a@b 不是一个有效的电子邮件地址？ - robertc

@robertc 因为电子邮件的有效性有规范。详细的技术规范在这里：http://tools.ietf.org/html/rfc5322#section-3.4，而在维基百科上有更人性化的描述：http://en.wikipedia.org/wiki/Email_address#Valid_email_addresses。基本上，电子邮件的域部分可以是有效的主机名或有效的IP地址。 "b" 不是其中任何一个。 - Ben McCormick

@ben336 是的，有这样的邮箱地址。b是一个有效的主机名，这也是为什么HTML5允许使用它的原因。其他有效的电子邮件地址包括root@localhost和me@mymachine。你可能想要避免在面向广大互联网的Web表单上接受这些电子邮件地址，但格式不是其中之一。 - robertc

@robertc 好的，我又做了些研究，并学到了更多关于它的知识。感谢您帮我指正 :) - Ben McCormick

[\w-.] 应该改为 [\w\-.]，需要转义 -，否则它会被视为方括号内的范围。 - ChrisWren

Answer 2

有没有一种方法可以将模式和多个元素混合在一起，以便正则表达式检查逗号分隔列表中的每个项目？

有。如果要匹配元素的正则表达式是foo，那么

^(?:foo(?:,(?!$)|$))*$

会匹配由逗号分隔的foo列表。

分隔符为(?:,(?!$)|$)，它将匹配要求不以输入结尾的必需逗号，或输入结尾。

该分隔符非常丑陋，但只要分隔符的任何后缀不是正文所需的非空前缀，就可以避免重复使用“foo”。

- Mike Samuel

Answer 3

你可以使用JavaScript读取输入，并按逗号分割输入。

function() {
var inputString = document.getElementById('emailinput').value;
var splitInput = inputString.split(',');

var pattern = /"your regex pattern"/;

var match = true;

for(i=0;i<splitInput.length;i++) {
  if(!splitInput.match(pattern)){
    match = false;
  }
}

return match;
}

- Justin

---

嗨Justin，我正在寻找一种本地HTML解决方案。我知道用JS做这个是微不足道的。 - Ben McCormick

如果你在问题标签中添加了javascript，你将会得到javascript相关的回答。 - Justin

我使用JS标记它，因为html5正则表达式使用javascript正则表达式语言。我认为我对我要寻找的东西非常具体。如果您查看问题的历史/更新，您将看到我实际上是事后添加了js标记，并带有该警告。我没有给您投反对票或其他任何东西，但是您的答案并未回答我提出的具体问题，即如何结合模式、多个和电子邮件属性来验证一组电子邮件与html5。 - Ben McCormick