使用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”這樣的電子郵件。

就像一個注釋一樣，出於安全原因，您應始終在服務器端進行驗證，因為可以非常輕松地繞過客戶端驗證。

Answer 2

有沒有辦法混合模式和多個，所以正則表達式檢查逗號分隔列表中的每個項目？

是。 如果匹配元素的正則表達式是foo ，那么

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

將匹配以逗號分隔的foo列表。

分隔符是(?:,(?!$)|$) ，它將匹配不結束輸入的必需逗號或輸入結束。

該分隔符非常難看，但只要分隔符的后綴不是正文所需的非空前綴，就可以避免重復“ 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;
}