Автоматически отправлять электронную почту, когда пользователь вводит адрес электронной почты

Question

Я хотел бы иметь что-то, что вызывает адрес электронной почты для себя, как только пользователь вводит свой адрес электронной почты в поле ввода. Как только адрес электронной почты будет введен, в поле добавляется дополнительный класс. например

Адрес электронной почты не введен:

<input class="simpleinput">

Адрес электронной почты вошли:

<input class="simpleinput emailok">

Не могли бы вы помочь? Большое спасибо

Answer 1

Добавить событие onBlur(), а затем проверить регулярное выражение /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i на электронную почту. если он совпадает, то добавьте класс.

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

Jquery раствор

$(function(){ 
 
    $('.simpleinput').on('blur', function(){ 
 
     var valueToTest = $(this).val() 
 
     var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
     if (testEmail.test(valueToTest)){ 
 
      alert('ok'); 
 
      $(this).addClass('emailOk'); 
 
     } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="simpleinput" type="email">

раствор

JS

var ele = document.querySelector('.simpleinput'); 
 
ele.addEventListener('blur', function(){ 
 

 
var valueToTest = this.value 
 
     var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
     if (testEmail.test(valueToTest)){ 
 
      alert('ok'); 
 
      this.className += emailok; 
 
     } 
 

 
}) 
 

<input class="simpleinput" type="email">

Answer 2

Насколько я понимаю, вы хотите добавить класс, когда письмо было помещено в поле.

var field = document.getElementsByClassName('simpleinput')[0]; 
field.addEventListener('blur', function(){ 
    if (field.value.length > 0) { 
     field.classList.add('emailok'); 
    } 
}); 

Это добавит событие размытия к цели поля и добавит класс, который вы хотите.