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

Validate Multiple Email Addresses with HTML5

本文关键字：电子邮件地址 验证 HTML5 使用      更新时间：2023-09-26

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

试试这个：

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

更新：

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

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

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

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

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

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

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

这个分隔符非常丑陋，但只要分隔符的后缀不是正文所需的非空前缀，就可以避免重复"foo"。

您可以使用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;
}
相关文章：