Проверять несколько адресов электронной почты с помощью 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=""> 

Update:

Использование <input type="email" value="" multiple>, похоже, прослушиваться, позволяя "с @ б" пройти. Хотя я бы пошел с этим методом, чтобы сохранить семантику, как вы сказали, и просто используйте валидацию на стороне сервера, а также на случай, если кто-то попытается отправить электронное письмо типа «a @ b».

Как и в любом случае, вы всегда должны проверять на стороне сервера по соображениям безопасности, так как проверка на стороне клиента может быть легко обойдена.

Answer 2

Вы можете прочитать ввод с помощью 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; 
} 

Answer 3

Есть ли способ, чтобы смешать образец и несколько так регулярное выражение проверяет каждый пункт в запятую?

Да. Если регулярное выражение, чтобы соответствовать элемент является foo, то

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

будет соответствовать запятую список foo с.

Сепаратор (?:,(?!$)|$), который будет соответствовать либо запятой, которая не заканчивает вход, либо конец ввода.

Этот разделитель ужасно уродлив, но позволяет избежать дублирования «foo», если ни один суффикс разделителя не является обязательным непустым префиксом тела.