使用HTML5验证多个电子邮件地址 [英] Validate Multiple Email Addresses with HTML5

问题描述

我正在尝试构建一个电子邮件表单，将多个逗号分隔的电子邮件作为输入，并使用HTML5进行验证。我想使用以下正则表达式来确保输入：

I'm trying to construct an email form that takes multiple comma separated emails as an input and verifies them using HTML5. I want to use the following regex to sanity check the input:

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

这是我尝试过的

这似乎不适用于多个： p>

This doesn't seem to work for more than one:

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

这是有效的，但只有内置的电子邮件验证，似乎是像$ code>。+ @。+ 。

This works, but only does the built in email validation, which seems to be something like .+@.+.

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

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

Is there a way to mix pattern and multiple so the regex checks each item in the comma separated list?

我在这里演示了一个演示： http：// codepen.io/ben336/pen/ihjKA

I have a demo here: http://codepen.io/ben336/pen/ihjKA

推荐答案

尝试这样：

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

更新：

使用< input type =emailvalue =multiple> 似乎被a @ b通过。虽然我会用这种方法来保持语义，就像你所说的那样，只需在服务器端使用验证，以防万一有人试图提交一个像@ @的邮件。

Using <input type="email" value="" multiple> does seem to be bugged by letting "a@b" pass. Though I would go with this method to keep the semantics as you said, and simply use validation on the server side as well just in case someone tries to submit an email like "a@b".

作为一个注释，您应该始终在安全方面验证服务器端，因为客户端验证可以非常容易地绕过。

Just as a note, you should always validate on the server side for security reasons anyway, as client side validation can be bypassed very easily.

这篇关于使用HTML5验证多个电子邮件地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！