使用JavaScript進行電子郵件輸入即時驗證

Question

我正在嘗試使用js驗證輸入type="email" 。

我找到了不同的方法來完成這項工作，但我沒有一個能奏效。

HTML

<label for="email" class="form__label">User e-mail:</label>
<input type="email" name="email" id="email" onblur="checkEmail(this.value);" class="form__input" >

JS

  document.addEventListener('DOMContentLoaded', function() {

  var email = document.getElementById('email');

  function checkEmail(email) {
    var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

    if (reg1.test(email) == false) {
      email.style.border = "1px solid red";
    }else (reg1.test(email) == true) {
      email.style.border = "1px solid green";
    }
  };

});

我每次都能得到的是：

Uncaught ReferenceError: checkEmail is not defined at HTMLInputElement.onblur . ..

我知道，我犯了一些簡單的錯誤，但是我為此苦了一段時間，無法繼續前進...

Answer 1

您在代碼中缺少If關鍵字，即

else (reg1.test(email) == true)

 var email = document.getElementById('email'); function checkEmail(element) { var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[az]{2,4}$/; if (reg1.test(email.value) == false) { email.style.border ='1px solid red'; }else if(reg1.test(email.value) == true){ email.style.border = "1px solid green"; } }; 

 <label for="email" class="form__label">User e-mail:</label> <input type="email" name="email" id="email" onblur="checkEmail(this);" class="form__input" > 

Answer 2

您可以使用@Andriy Klitsuk引用的HTML5電子郵件檢查功能。 因此，您可以完全省去多余的checkEmail呼叫。

但是要解決您的錯誤：

未捕獲的ReferenceError：在HTMLInputElement.onblur上未定義checkEmail

你收到上述誤差作為checkEmail功能是本事件處理程序內部document.addEventListener('DOMContentLoaded', function(){ .... ，並因此不可用外面。

您可以將函數從EventListener中取出，因為無論如何在EventHandler中都不會調用它：

  document.addEventListener('DOMContentLoaded', function() {

  var email = document.getElementById('email');
  });
  function checkEmail(email) {
    var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

    if (reg1.test(email) == false) {
      email.style.border = "1px solid red";
    } else if (reg1.test(email) == true) { // if was missing here
      email.style.border = "1px solid green";
    }
  };

Answer 3

我更喜歡傳遞元素

<label for="email" class="form__label">User e-mail:</label>
<input type="email" name="email" id="email" onblur="checkEmail(this);" class="form__input" >

並且該函數將獲得如下值

function checkEmail(email) {
    var val = email.value;
    var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

    if (reg1.test(email) == false) {
      email.style.border = "1px solid red";
    }else if (reg1.test(email) == true) {
      email.style.border = "1px solid green";
    }
  };

還有一個if是否丟失

參考代碼筆https://codepen.io/YasirKamdar/pen/eVRaYZ?editors=1111

Answer 4

您也缺少條件。 簡單地使用這個。

  function checkEmail(elm) {
    var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;
console.log(reg1.test(elm.value))
    if (reg1.test(elm.value) == false){
      elm.style.border = "1px solid red";
    }else{
     elm.style.border = "1px solid green";
    }
  }

<label for="email" class="form__label">User e-mail:</label>
<input type="email" name="email" id="email" onblur="checkEmail(this);" class="form__input" >

Answer 5

首先， else語句中存在語法錯誤。 如果是，應該是else if 。 現在解決； 除去checkEmail()從功能eventListener ，讓它獨立的，就像這樣：

function checkEmail(email) {
    var email = document.getElementById('email');
    var reg1 = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;

    if (reg1.test(email) == false) {
      email.style.border = "1px solid red";
    }else if (reg1.test(email) == true) {
      email.style.border = "1px solid green";
    }
  }