使用 javascript 进行电子邮件输入即时验证答案

【问题标题】：Email input instant validation with javascript使用 javascript 进行电子邮件输入即时验证
【发布时间】：2018-02-13 11:31:46
【问题描述】：

我正在尝试使用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 ...

我知道，我犯了一些简单的错误，但我现在为此苦苦挣扎了一段时间，无法继续……

【问题讨论】：

我能问一下您为什么要实现这一目标吗？ HTML5默认检查不好吗？
您可以简单地将“必填”添加到您的电子邮件输入中。
我必须更改边框颜色，所以我猜“必需”还不够...

标签： javascript validation email input onblur

【解决方案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" >

【讨论】：

【解决方案2】：

您可以使用@Andriy Klitsuk 引用的 HTML5 的电子邮件检查。所以你可以完全省略额外的checkEmail 电话。

但是遇到你的错误：

未捕获的 ReferenceError: checkEmail 未定义在 HTMLInputElement.onblur

您会收到上述错误，因为 checkEmail 函数存在于 EventHandler 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";
    }
  };

【讨论】：

【解决方案3】：

您也缺少条件。只需使用它。

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

【讨论】：

【解决方案4】：

首先，您的else 语句中存在语法错误。应该是else if。现在解决方案；从eventListener 中删除checkEmail() 函数并让它独立，如下所示：

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

【讨论】：

【解决方案5】：

我更喜欢传递元素

<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

【讨论】：