JS电子邮件正则表达式 - Javascript

在Javascript开发中，常常需要对用户输入的电子邮件地址进行验证，正确的格式为 username@domain.com 。为了实现这一功能，我们可以使用正则表达式来进行匹配和验证。

以下是一个基本的电子邮件正则表达式：

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

现在，让我们逐步解释这个正则表达式。

首先，我们使用两个反斜杠“/”将表达式括起来，表示这是一个正则表达式。然后，我们使用“^”表示开头，以确保电子邮件地址从头开始验证。接着，我们使用“[^\s@]”表示除空格和“@”符号外的任何字符。这个表达式出现了两次，一次用于用户名，一次用于域名。

然后，在“@”符号之后，我们使用“+”表示至少匹配一个字符，再次使用“[^\s@]”表示除空格和“@”符号外的任何字符。接着是一个点“.”，用于分隔域名中的名称。最后，我们又使用“[^\s@]”表示域名中的任何字符。

最后，我们使用“$”表示表达式的结尾，确保整个电子邮件地址都被匹配。

现在，我们可以使用这个电子邮件正则表达式来验证一个字符串是否为电子邮件地址：

const email = 'example@email.com';
if (emailRegex.test(email)) {
  console.log('Valid email');
} else {
  console.log('Invalid email');
}

这将输出“Valid email”。

我们也可以将这个正则表达式用在一个文本框的输入事件中，实时验证用户输入的内容是否为有效的电子邮件地址。例如：

const emailInput = document.getElementById('email-input');
emailInput.addEventListener('input', (event) => {
  const email = event.target.value;
  if (emailRegex.test(email)) {
    emailInput.classList.remove('is-invalid');
    emailInput.classList.add('is-valid');
  } else {
    emailInput.classList.remove('is-valid');
    emailInput.classList.add('is-invalid');
  }
});

这会将文本框的样式更改为绿色（有效）或红色（无效），以实时反映用户的输入。

因此，使用Javascript和正则表达式，我们可以轻松地验证电子邮件地址，以确保它们符合所需的格式。