Шаблон ввода HTML5 для данного имени.lastname@containsstring.domain

Question

Я пытаюсь проверить ввод электронной почты с помощью шаблона HTML5.

Поле ввода должно иметь следующий формат:

givenname.lastname@simonsays.domain

Другими словами, мне нужно проверить, есть листрока букв + точка + другая строка букв + должна содержать строку simon.

Пока я нашел

pattern=".*simon.+" 

Однако, он только проверяет, содержит ли вводsimon.

Помощь будет высоко оценена!

Answer 1

Вы можете использовать

pattern="\S+\.\S+@\S*simon\S*\.\S+"

Шаблон анализируется как /^(?:\S+\.\S+@\S*simon\S*\.\S+)$/ и соответствует

• ^ - начало строки
• (?:- начало группы контейнеров без захвата
• \S+\.\S+ - 1+ непробельных символов, . и 1+ символов, кроме пробелов
• @ - a @char
• \S* - 0+ непробельных символов
• simon - буквенная подстрока
• \S* - 0+ непробельных символов
• \. - точка
• \S+ - 1+ непробельные символы
• ) - конец группы контейнеров
• $ - конецстроки.

HTML5:

input:valid {
  color: black;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="\S+\.\S+@\S*simon\S*\.\S+" title="Please enter an email address with 'simon' in the domain name!" placeholder="name.surname@domain.com" value="my.name@some-simon-here.com" />
 <input type="Submit"/> 
</form>

Если вы хотите «контролировать» точки в шаблоне, замените \S на [^\s.], который соответствует любому символу, кроме пробела, и ..