验证电子邮件输入 javascript onchange

📌 相关文章

📜 验证电子邮件输入 javascript onchange - Javascript (1)

📅 最后修改于: 2023-12-03 15:42:32.388000 🧑 作者: Mango

在 Web 开发中，电子邮件输入框的数据验证变得越来越重要。本文将介绍如何使用 JavaScript 的 onchange 事件来验证电子邮件输入。

onchange 事件

onchange 事件在 HTML 元素的值发生改变时触发。可以用它来检测用户在电子邮件输入框中输入的值是否合法。

JavaScript 正则表达式

在验证电子邮件时，我们需要用到 JavaScript 的正则表达式。正则表达式是一种可以用来匹配字符串的工具。下面是一个验证电子邮件的正则表达式：

const emailRegex = /^(([^<>()[\].,;:\s@\"]+(\.[^<>()[\].,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

这个正则表达式可以匹配所有合法的电子邮件地址。

验证电子邮件输入

我们可以在 HTML 中给电子邮件输入框添加 onchange 事件。该事件会在用户输入内容改变时触发。

<input type="email" id="email" onchange="validateEmail()">

在 JavaScript 中，我们可以获取该输入框的值，并使用上面的正则表达式进行验证。

function validateEmail() {
  const emailInput = document.getElementById('email');
  const email = emailInput.value;

  if (emailRegex.test(email)) {
    // 合法的电子邮件
  } else {
    // 不合法的电子邮件
  }
}

完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>验证电子邮件输入 onchange</title>
    <script>
      const emailRegex = /^(([^<>()[\].,;:\s@\"]+(\.[^<>()[\].,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      function validateEmail() {
        const emailInput = document.getElementById('email');
        const email = emailInput.value;

        if (emailRegex.test(email)) {
          // 合法的电子邮件
        } else {
          // 不合法的电子邮件
        }
      }
    </script>
  </head>
  <body>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" onchange="validateEmail()">
  </body>
</html>

以上是如何使用 JavaScript 的 onchange 事件来验证电子邮件输入的全部内容。