Проверка павильности email при onblur

206

30 декабря 2018, 02:30

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

<form id="form_id" method="post" action="" onsubmit="javascript:return validate('form_id','email');">
    <input type="text" id="email" name="email" />
    <input type="submit" value="Submit" />
</form>
<script>
    email.onblur = function(){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        var address = document.getElementById("email");
        if(reg.test(address) === false) {
            alert('Введите корректный e-mail');
            return false;
        }
    };
    email.onfocus = function() {
        document.getElementById('email').value = '';
    };
</script>

Answer 1

document.getElementById("email") возваращает целый элемент. Вам нужен только текст, доступ к которому можно получить через свойство value:

email.onblur = function(){ 
        var reg = /^[A-Za-z0-9_.-]+@[A-Za-z0-9_.-]+\.[A-Za-z]{2,4}$/; 
        var address = document.getElementById("email").value; 
        console.log(address); 
        if(!reg.test(address)) { 
            alert('Введите корректный e-mail'); 
            return false; 
        } 
 
    }; 
    email.onfocus = function() { 
        document.getElementById('email').value = ''; 
    };

<form id="form_id" method="post" action="" onsubmit="javascript:return validate('form_id','email');"> 
    <input type="text" id="email" name="email" /> 
    <input type="submit" value="Submit" /> 
</form>

Предлагаю также заменит ([A-Za-z0-9_\-\.])+ на [A-Za-z0-9_.-]+, чтобы движок регулярных выражений не перезаписывал каждый найденный символ в буфере первой захватывающей группы (которую следует просто удалить, также как и вторую, так как они не используются далее в коде).

Кстати, если вы хотите использовать регулярное выражение, которое следует логике type="email", замените своё выражение следующим

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

См. документацию по HTML5

Answer 2

Для адреса электронной почты лучше использовать [type=email], регулярное выражение для проверки задавать через атрибут pattern, проверять валидность после потери фокуса событием change.

var mailInput = document.querySelector('[type=email]'); 
mailInput.addEventListener('change',function(){ 
  if(this.validity.valid){ 
    console.log('Валидно') 
  }else{ 
    console.log('Невалидно') 
  } 
});

<input type="email" pattern="^[A-Za-z0-9_.-]+@[A-Za-z0-9_.-]+\.[A-Za-z]{2,4}$" />

Создание сайта для доставки еды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проверка павильности email при onblur

Отобразить перенос строк из json ответа

Не могу получить данные из sql

Парсинг Razor страниц в отдельном AppDomain

Инициализация в духе массива