Как осуществить валидацию полей формы — email и телефон — именно через js?

Question

[Ella Fitzgerald]

Всем привет!
Помогите, пожалуйста, новичку! Как осуществить валидацию полей формы - email и телефон - именно через js?

html:

<form>
     <input id="email" type="email" name="email" autofocus required placeholder="E-mail">
     <input class="phone" type="tel" name="phone" required placeholder="Phone">
     <input id="form_button" class="btn" type="button" value="Call Me Now!">
</form>

Мне нужно дополнительно проверить обязательно с помощью js, что поле емейла содержит @ и не содержит пробелов, а поле с номером телефона содержит только цифры и символы(без букв), и после этого выполнить определенные действия.

Пока я только написала проверку на то, что они не пустые, но этого не достаточно:

var email = document.querySelector("[name=email]");
var phone = document.querySelector("[name=phone]");

if (!email.value || !phone.value) {...}

Answer 1

[Игорь Воротнёв]

Первая ссылка в гугле - emailregex.com

// Javascript: email
/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i

C телефоном чуть интереснее, потому что самих форматов масса. Смотрим сюда и тюним под свои требования:

// Javascript: phone
^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

Comments

[Ella Fitzgerald]

спасибо!