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

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”这样的电子邮件。

正如请注意，出于安全原因，您应始终在服务器端进行验证，因为可以非常轻松地绕过客户端验证。

Answer 2

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

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

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

将匹配以逗号分隔的foo s。

列表

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

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

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;
}

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

3 个答案: