JavaScript验证Email(3种方法)

什么是Email？

Email又称电子邮件，是一种利用计算机网络提供的电子信箱来交换电子邮件（简称邮件）的通信方式。Email具有传输快捷、费用低廉、传递资料范围广泛、信息安全性好、随时随地都可以阅读等特点。

为什么需要验证Email？

在许多场合中，Email是身份验证、信息传递和通信的必要手段。但是，一些用户可能会输入错误的Email地址，这不仅会影响通信和信息传递，还可能导致安全问题。

JavaScript验证Email的3种方法

正则表达式验证Email

正则表达式是字符串模式匹配的工具。它可以用于验证Email地址。下面是一些常见的Email地址的正则表达式：

function isEmail(email) {
  var regExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return regExp.test(email);
}

使用第三方库验证Email

许多JavaScript第三方库提供了验证Email地址的功能。其中一些库是：

jQuery
lodash
validator.js

下面是一个使用validator.js库验证Email地址的示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.6.0/validator.min.js"></script>
<script>
function isEmail(email) {
  return validator.isEmail(email);
}
</script>

HTML5中的Email输入类型

HTML5中的input元素提供了一个类型为“email”的属性，这使得浏览器可以对Email地址进行验证。下面是一个使用HTML5的Email验证的示例：

<input type="email" id="email">
<script>
function isEmail() {
  var email = document.getElementById("email").value;
  return email.checkValidity();
}
</script>

两条详细的示例：

使用正则表达式验证Email格式是否正确

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>验证Email格式是否正确</title>
</head>
<body>
  <input type="text" id="email">
  <button onclick="checkEmail()">验证</button>
  <script>
    function checkEmail() {
      var email = document.getElementById("email").value;
      var regExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (regExp.test(email)) {
        alert("Email格式正确");
      } else {
        alert("Email格式不正确");
      }
    }
  </script>
</body>
</html>

使用第三方库验证Email格式是否正确

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>验证Email格式是否正确</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.6.0/validator.min.js"></script>
</head>
<body>
  <input type="text" id="email">
  <button onclick="checkEmail()">验证</button>
  <script>
    function checkEmail() {
      var email = document.getElementById("email").value;
      if (validator.isEmail(email)) {
        alert("Email格式正确");
      } else {
        alert("Email格式不正确");
      }
    }
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript验证Email(3种方法) - Python技术站