8

我正在尝试构建一个电子邮件表单，该表单将多个逗号分隔的电子邮件作为输入并使用 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

4

3 回答 3

11

试试这个：

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

更新：

<input type="email" value="" multiple>让“a@b”通过似乎确实会干扰使用。虽然我会使用这种方法来保持你所说的语义，并且只需在服务器端使用验证，以防有人试图提交像“a@b”这样的电子邮件。

请注意，出于安全原因，您应该始终在服务器端进行验证，因为可以很容易地绕过客户端验证。

于 2013-10-07T17:47:24.670 回答
4

有没有办法混合模式和多个，以便正则表达式检查逗号分隔列表中的每个项目？

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

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

将匹配逗号分隔的foos 列表。

分隔符(?:,(?!$)|$)将匹配不结束输入的必需逗号或输入结束。

foo该分隔符非常难看，但只要分隔符的后缀不是正文的必需非空前缀，就可以避免重复“ ”。

于 2013-10-07T17:55:29.523 回答
0

您可以使用 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;
}
于 2013-10-07T17:55:14.350 回答