使用JavaScript进行电子邮件输入即时验证

Question

I'm trying to validate input type="email" with js .

I found different ways to do that but non of them works form me.

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";
    }
  };

});

What I get every time is:

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

I know, I make some simple error but I'm struggling with this for a while now and can't move on...

Answer 1

You are missing If keyword in your code ie

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

You could ineed use the Email Check of HTML5 as quoted by @Andriy Klitsuk. So you could completely omit your extra checkEmail call.

But getting to your error :

Uncaught ReferenceError: checkEmail is not defined at HTMLInputElement.onblur

you get the above error as the checkEmail function is present inside EventHandler document.addEventListener('DOMContentLoaded', function(){ .... and hence is not available outside it.

You could take the function out of the EventListener as it is not being called inside the EventHandler anyway :

  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

I would prefer passing the element

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

And the function would get the value as follows

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";
    }
  };

also an if is missing

code pen for reference https://codepen.io/YasirKamdar/pen/eVRaYZ?editors=1111

Answer 4

You are missing the condition as well. simply use this.

  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

First off, there is a syntax error in your else statement. It should be else if . Now to the solution; remove the checkEmail() function from the eventListener and let it stand alone, like this:

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";
    }
  }