「短文」如何使用正则表达式验证邮箱（Emails）

要使用正则表达式验证电子邮件，您可以将 match 函数与以下两个正则表达式之一结合使用。如果给定的输入字符串中有一个有效的电子邮件地址，match() 函数将返回一个真值。

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

/(?:[a-z0-9+!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/i

第一个正则表达式更简单、更简洁。它确保您有一系列非空白字符，后跟一个@，然后是更多的非空白字符、一个点和更多的非空白。

第二个正则表达式更完整，完全符合电子邮件地址的 RFC-2822 规范。

下面是一个示例，可让您使用上述正则表达式测试电子邮件地址。

<div>
  <input id="example" type="email"/>
  <div>
    <button onclick="verifyEmail1()">Verify Email with Regex 1</button>
    <button onclick="verifyEmail2()">Verify Email with Regex 2</button>
  </div>
  <div>
    <p id="result"></p>
  </div>
</div>

<script>
function verifyEmail1() {
  const input = document.querySelector("#example");
  const display = document.querySelector("#result");
  if (input.value.match(/[^\s@]+@[^\s@]+\.[^\s@]+/gi)) {
    display.innerHTML = input.value + ' is valid';
  } else {
    display.innerHTML = input.value + ' is not a valid email';
  }
}
function verifyEmail2() {
  const input = document.querySelector("#example");
  const display = document.querySelector("#result");
  if (input.value.match(/(?:[a-z0-9+!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi)) {
    display.innerHTML = input.value + ' is valid';
  } else {
    display.innerHTML = input.value + ' is not a valid email';
  }
}
</script>

注：本文属于原创文章，版权属于「前端达人」公众号及 qianduandaren.com 所有，未经授权，谢绝一切形式的转载