JavaScript中的E-mail 地址格式验证

2023年5月19日下午6:30 • JavaScript

对于JavaScript中的E-mail 地址格式验证，我们可以从以下几个方面进行讲解。

1. E-mail地址的合法性

一个合法的E-mail地址应当包含“@”符号，且“@”符号前后应当至少包含一个字符，并且“@”符号后应当包含一个“.”符号。另外，E-mail地址中不允许出现空格、制表符和换行符等空白符号。

在JavaScript中，我们可以使用正则表达式来检验E-mail地址的合法性。一个简单的正则表达式如下所示：

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

其中：

^表示字符串的开始；
[^\s@]+表示匹配一个或多个非空白符号和“@”符号；
@表示匹配一个“@”符号；
[^\s@]+\.[^\s@]+表示匹配一个或多个非空白符和一个“.”符号；
$表示字符串的结束。

我们可以使用这个正则表达式来判断一个E-mail地址是否合法，代码示例如下：

function isValidEmail(email) {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}

console.log(isValidEmail('john.doe@example.com')); // true
console.log(isValidEmail('jane.doe@')); // false
console.log(isValidEmail('jane.doe@example.')); // false

2. 使用HTML5的表单验证

在HTML5中，可以使用type="email"的表单元素来获取用户输入的E-mail地址，并自动进行格式验证。如果用户输入的内容不符合E-mail地址的格式要求，则表单会自动提示用户并防止提交。

代码示例如下：

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>

其中：

type="email"表示这是一个用于输入E-mail地址的表单元素；
required表示这是一个必填字段，如果用户没有填写则无法提交表单。

如果用户输入的内容不符合E-mail地址的格式要求，则表单会自动提示并阻止提交。如果通过验证，则可以通过JavaScript获取表单元素的值进行后续操作，代码示例如下：

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
  console.log(form.elements.email.value); // 输出输入的Email地址
});

示例1：使用正则表达式验证E-mail地址

我们可以编写一个简单的页面，在页面中包含一个文本框用于输入E-mail地址，以及一个按钮用于提交表单。当用户点击按钮时，使用JavaScript代码判断输入的E-mail地址是否合法，并给出相应的提示信息。

页面代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Email地址格式验证</title>
    <style>
      input[type="text"] {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <h1>Email地址格式验证</h1>
    <form>
      <label for="email">Email:</label>
      <input type="text" id="email" required>
      <button type="submit">Submit</button>
    </form>
    <p id="result"></p>
    <script>
      const form = document.querySelector('form');
      const result = document.querySelector('#result');

      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const email = form.elements.email.value.trim();
        if (isValidEmail(email)) {
          result.textContent = 'Email地址格式正确';
        } else {
          result.textContent = 'Email地址格式不正确';
        }
      });

      function isValidEmail(email) {
        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return regex.test(email);
      }
    </script>
  </body>
</html>

示例2：使用HTML5表单验证E-mail地址

我们可以编写一个简单的页面，在页面中包含一个使用HTML5的表单元素，用于输入E-mail地址。当用户提交表单时，如果输入的E-mail地址不符合格式要求，则表单会自动提示用户并阻止提交；如果输入的E-mail地址符合格式要求，则可以通过JavaScript代码获取表单元素的值进行后续操作。

页面代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Email地址格式验证</title>
    <style>
      input[type="email"] {
        width: 200px;
      }
    </style>
  </head>
  <body>
    <h1>Email地址格式验证</h1>
    <form>
      <label for="email">Email:</label>
      <input type="email" id="email" required>
      <button type="submit">Submit</button>
    </form>
    <p id="result"></p>
    <script>
      const form = document.querySelector('form');
      const result = document.querySelector('#result');

      form.addEventListener('submit', (event) => {
        event.preventDefault();
        result.textContent = '输入的Email地址为：' + form.elements.email.value.trim();
      });
    </script>
  </body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中的E-mail 地址格式验证 - Python技术站