當用戶輸入電子郵件地址時自動發送電子郵件

只要用戶在我的輸入字段中輸入他的電子郵件地址，我就想讓自己觸發電子郵件地址。只要輸入電子郵件地址，就會在該字段中添加一個額外的類。例如當用戶輸入電子郵件地址時自動發送電子郵件

沒有輸入的電子郵件地址：

<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

這只是一個例子。 –

當用戶輸入電子郵件地址時自動發送電子郵件

回答

相關問題