Проверка на правильность ввода Email

Как выполнить проверку на правильность ввода почтового адреса

В том случае, если требуется получить от пользователя его электронный адрес, хорошим функционалом будет проверка на правильность ввода. Отличительной же особенностью электронных адресов email является знак @, без которого не существует ни одного почтового адреса.

Таким образом, чтобы выполнить проверку правильности ввода, следует создать функцию, использующую поиск IndexOf() по введенным в форму данным... Это мы рассматривали в статье Методы строковых объектов. Поиск

Но перед тем, как искать что-то, давайте создадим форму и кнопку отправки почтового адреса, которая будет вызывать функцию emailcheck():

<form>
<p>Введите ваш электронный адрес:
<input type="text" name="checkemail" id="checkemail" size="15">
<input type="button" name="check" value="Проверить!" onclick="emailcheck()" >
</form>

С формой разобрались. Теперь же напишем функцию, которая будет искать значок @ во введенном тексте:

function emailcheck(){
var email = document.getElementById("checkemail").value;
if (email.indexOf("@")!=-1){
alert ("Это Email адрес")
}
else{alert("Вы ошиблись с вводом")}
}

В коде выше переменной email сначала присваивается значение формы ввода с id checkemail, а затем выполняется поиск на символ @. Если символ собаки найден, то выводится сообщение о том, что "Это Email адрес". В противном случае - "Вы ошиблись с вводом"

Конечно, для верной проверки этого недостаточно. Как известно, каждый email имеет, помимо значка собаки (@) еще и точку. Поэтому в поиске следует уточнить условие, что в адресе должна быть точка. Тогда скрипт должен выглядеть так:

function emailcheck(){
var email = document.getElementById("checkemail").value;
if (email.indexOf("@")&&email.indexOf(".")!=-1){
alert ("Это Email адрес")
}
else{alert("Вы ошиблись с вводом")}

Проверка на ввод email


Данная проверка, конечно, неполная. При желании, можно включить в поиск также проверки на наличие доменных зон или ограничить доступные адреса теми или иными почтовыми сервисами - здесь не столь важно. Главное, что теперь нам понятен принцип...

Соответственно, в случае того, если проверка пройдена, мы можем совершать те или иные действия, в зависимости от необходимости. Давайте сделаем, чтобы введенный адрес отображался чуть ниже, причем сообщение будет выводиться без нажатия на кнопку прямо во время написания:

Для этого уберем <input type="button"... и вместо этого добавим  к <input type="text" name="checkemail" id="checkemail" size="15" запуск функции по вводу (oninput)

<input type="text" name="checkemail" id="checkemail" size="15" oninput="emailcheck()">

Кроме того, потребуется изменить функцию:

function emailcheck(){
var email = document.getElementById("checkemail").value;
if (email.indexOf("@")&&email.indexOf(".")!=-1){
document.getElementById("youremail").value= ("Введенный вами E-mail:" + email);
}
else{
document.getElementById("youremail").value = ("Вы ввели " + email + ". Это не похоже на адрес электронной почты.")
}
}

Ну и код целиком: Развернуть/свернуть

Вот пример рабочего скрипта:

Введите ваш электронный адрес: