当用户输入电子邮件地址时自动发送电子邮件

只要用户在我的输入字段中输入他的电子邮件地址，我就想让自己触发电子邮件地址。只要输入电子邮件地址，就会在该字段中添加一个额外的类。例如当用户输入电子邮件地址时自动发送电子邮件

没有输入的电子邮件地址：

<input class="simpleinput">

输入的电子邮件地址：

<input class="simpleinput emailok">

你能帮忙吗？多谢提前

来源

2016-09-19 Alessandro Crotti

我不太明白你在问什么。你想发送一个电子邮件或添加CSS到输入字段？ –

你到目前为止所尝试过的？请更新您的代码。 – ADarnal

当用户在文本框中输入有效的emailId时，是否要发送电子邮件到您的电子邮件ID？ –

添加一个onBlur()事件，然后测试正则表达式/^[A-Z0-9._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i的电子邮件。如果匹配，则添加一个类。

或者，当测试条件成功时，您可以直接添加一个调用来触发电子邮件。

JQUERY溶液

$(function(){ 
 
    $('.simpleinput').on('blur', function(){ 
 
     var valueToTest = $(this).val() 
 
     var testEmail = /^[A-Z0-9._%+-][email protected]([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._%+-][email protected]([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; 
 
     if (testEmail.test(valueToTest)){ 
 
      alert('ok'); 
 
      this.className += emailok; 
 
     } 
 

 
})

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

来源

2016-09-19 10:38:32

问题标签中没有提到'Jquery'，所以我们不知道OP是否在使用它。 –

@Reddy你是对的，但这也是一种方式。如果其他人选择使用它。我也会更新javascript版本的编辑。感谢提醒，我没有注意到， –

@Reddy添加了一个JS解决方案 –

我知道你想添加一个类，当电子邮件被放在现场。

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

这将为您的字段目标添加模糊事件并添加您需要的类。

来源

2016-09-19 10:57:19

而不是检查field.value.length> 0它会更好地使用正则表达式（电子邮件验证器）。你说什么？ – ADarnal

这只是一个例子。 –

当用户输入电子邮件地址时自动发送电子邮件

回答

相关问题