Проверка ввода телефона Email адреса на JavaScript ❎ WpCraft

Задача. Необходимо решение для проверки поля ввода на соответствие формату email-адреса почты и номера телефона при отправке формы.

Заполните поля E-mail и Телефон.

E-mail:

Телефон:

Пример 1: Проверка ввода электронной почты и номера телефона на JS

Решение. На Javascript можно реализовать проверку вводимой информации с помощью регулярных выражений. Используем Код №1 из Примера №1. Телефон проверяем так, чтобы первая была «+» или цифра, остальные — цифры, скобки и пробелы.


<script type="text/javascript">
function ValidEmail() { 
    var regExpr = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
    var wpcraftMail = document.getElementById('email').value;
    var valid = regExpr.test(wpcraftMail);
    if (valid){
		output = 'Адрес E-mail введен <span style="color:green">правильно!</span>';
	} else {
		output = 'Адрес E-mail введен <span style="color:red">неправильно!</span>';
	}
		document.getElementById('message').innerHTML = output;
		return valid;
}
 
function ValidPhone() {
    var regExpr = /^[\d\+][\d\(\)\ -]{4,14}\d$/;
    var wpcraftPhone = document.getElementById('phone').value;
    var valid = regExpr.test(wpcraftPhone);
	
    if (valid) { 
	output = 'Номер телефона введен <span style="color:green">правильно!</span>';
	} else {
		output = 'Номер телефона введен <span style="color:red">неправильно!</span>';
	}
		document.getElementById('message').innerHTML = document.getElementById('message').innerHTML+'<br />'+output;
		return valid;
}  
</script>

<div class="example-block"><p id="message" style="font-weight: 600;">Заполните поля E-mail и Телефон.</p>
<div style="display: flex;justify-content: space-evenly;flex-wrap: wrap;align-items: center;">
<div>E-mail: <input id="email" name="email" type="text" size="20" /><br /></div>
<div>Телефон: <input id="phone" name="phone" type="text" size="20" /><br /></div>
<input style="padding: 8px;" name="button" type="submit" value="Проверить" onClick="ValidEmail(); ValidPhone();" /></div></div>

function ValidEmail() {

var regExpr = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;

var wpcraftMail = document.getElementById('email').value;

var valid = regExpr.test(wpcraftMail);

if (valid){

output = 'Адрес E-mail введен <span style="color:green">правильно!</span>';

} else {

output = 'Адрес E-mail введен <span style="color:red">неправильно!</span>';

}

document.getElementById('message').innerHTML = output;

return valid;

}

function ValidPhone() {

var regExpr = /^[\d\+][\d\ -]{4,14}\d$/;

var wpcraftPhone = document.getElementById('phone').value;

var valid = regExpr.test(wpcraftPhone);

if (valid) {

output = 'Номер телефона введен <span style="color:green">правильно!</span>';

} else {

output = 'Номер телефона введен <span style="color:red">неправильно!</span>';

}

document.getElementById('message').innerHTML = document.getElementById('message').innerHTML+'<br />'+output;

return valid;

}

</script>

<div class="example-block"><p id="message" style="font-weight: 600;">Заполните поля E-mail и Телефон.</p>

<div>Телефон: <input id="phone" name="phone" type="text" size="20" /><br /></div>

Код №1: Проверка ввода электронной почты и номера телефона регулярным выражением

Суть в том, что на кнопку вешаем событие и при клике вызываем функции, которые получают содержимое полей и проверяют соответствие содержимого (в примере это функции ValidPhone и ValidEmail). В каждой функции мы содаем регулярные выражения (шаблоны), согласно котором будут проверяться вводимые данные.
Метод для регулярного выражения — .test(str) ищет совпадение и возвращает true/false, в зависимости от того, нашел ли он его или нет.

Источник realadmin.ru