使用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

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"这样的电子邮件.

就像一个注释一样,出于安全原因,您应始终在服务器端进行验证,因为可以非常轻松地绕过客户端验证.