时间戳

首页 > 解决方案 > 如何完美地验证电子邮件地址？

javascript - 如何完美地验证电子邮件地址？

问题描述

我需要帮助验证正确的电子邮件地址。我已经设法解决空字段，但我还需要解决不正确的电子邮件地址。我的意思是，如果我输入的不是电子邮件地址，它会给我一条消息，说“请输入正确的电子邮件地址”。如何找到可用于此验证的空值？

这：

if (x == "what goes here?")
   {
    document.getElementById("demo").innerHTML = "Please enter a proper email address";
    document.getElementById("demo").style.display = "block";
    return false;
  }

“这里发生了什么？” 是一个占位符，供您替换为答案。

而且，不用多说，这是该网站的代码：

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style>
body {
  font-family: 'PT Sans', sans-serif;
}
p#demo {
  padding: 5px;
  background: rgba(255,0,0,0.2);
  border: red solid 1px;
  color: red;
  display: none;
  max-width: 140px;
  text-align: left;
  font-size: 12px;
  margin-left: 2px;
  font-family: 'PT Sans', sans-serif;
}
input[type="submit"] {
  background-color: red;
  border: none;
  font-family: 'PT Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
}
input[type="email"] {
  padding: 4px;
  }
input[type="email"]:focus {
  outline: none;
}
</style>
<script>
function validateForm() {
  var x = document.forms["myForm"]["EMAIL"].value;
  if (x == "") {
    document.getElementById("demo").innerHTML = "Email address is required.";
    document.getElementById("demo").style.display = "block";
    return false;
  }
   if (x == "what goes here?")
   {
    document.getElementById("demo").innerHTML = "Please enter a proper email address";
    document.getElementById("demo").style.display = "block";
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="https://gmail.us19.list-manage.com/subscribe/post?u=f206f10b38a504434c650c6bf&amp;id=5ce815006b" onsubmit="return validateForm()" method="post" >
  <p id="demo"></p>
  <input type="email" name="EMAIL">
  <input type="submit" value="Sign up!">
  
</form>

</body>
</html>

标签： javascripthtmlcss

解决方案

因为我最近刚刚创建了一个带有电子邮件地址验证的表单，所以我使用了正则表达式：

^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,}|[0-9]{1,})(\]?)$

我认为你可以用这个做的是：

function validateEmail() {
  document.getElementById("demo").innerHTML = "Please enter a proper email address";
  document.getElementById("demo").style.display = "block";
}
<form action="">
  <input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0- 9\-]+\.)+))([a-zA-Z]{2,}|[0-9]{1,})(\]?)$" placeholder="Email Address" oninvalid="validateEmail()" />
  <div id="demo"></div>
  <input type="submit" />
</form>

但是，这也将创建一个 HTML5 默认验证气泡。因此，如果您不想将其添加到您的 JavaScript 中（注意：这将影响您的整个表单）：

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

这将禁用默认验证，但会保留您的验证。我希望这可以帮助你！

编辑：我知道正则表达式（RegEx）不是最好的方法，但是这个方法从来没有让我失望过。

推荐阅读