javascript - 使用 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 未在 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.-]+\.[a-z]{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" >