时间戳

首页 > 解决方案 > 通过 Javascript 中的 RegEx 逐步验证电子邮件地址

javascript - 通过 Javascript 中的 RegEx 逐步验证电子邮件地址

问题描述

我想对电子邮件地址进行渐进式验证。我的意思是我想验证，因为一次提供一个字符的字符串，当前字符串是否代表电子邮件地址的有效开头。

请注意，我知道这个和其他类似的答案为匹配完整的电子邮件地址提供了极好的模式。我正在寻找的是略有不同。

我想知道，给定一个正则表达式模式，说出上面链接中描述的下面的模式，如果有一种通用的方法来说明给定的字符串是否代表模式的有效开头。

/^(([^<>()\[\]\\.,;:\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,}))$/

我知道我可以手动将上述模式分解为复合部分，然后将它们“或”在一起，以便从主要模式的开头开始捕获更长的模式，但我希望有一些更优雅和/或更少冗长的东西它可以将已建立的模式引用为捕获组，并仅在内部查找开头的部分匹配项。这可以用正则表达式实现吗？

正则表达式将匹配的字符串：

正则表达式不匹配的字符串：

标签： javascriptregex

解决方案

我正在简化电子邮件模式以/^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+$/简化方法的步骤。

  1. 您确定使用模式输入有效值的场景：
值正则表达式匹配
----------------- --------------------------------- -------- ---------
t /^[az]+/ 是
到 /^[az]+/ 是
汤姆 /^[az]+/ 是
汤姆。/^[az]+\./ 是
tom.e /^[az]+(\.[az]+)*/ 是
tom.ed /^[az]+(\.[az]+)*/ 是
tom.ed@ /^[az]+(\.[az]+)*@/ 是
tom.ed@i /^[az]+(\.[az]+)*@[az]+/ 是
tom.ed@in /^[az]+(\.[az]+)*@[az]+/ 是
tom.ed@int /^[az]+(\.[az]+)*@[az]+/ 是
tom.ed@inte /^[az]+(\.[az]+)*@[az]+/ 是
tom.ed@inter /^[az]+(\.[az]+)*@[az]+/ 是
tom.ed@inter。/^[az]+(\.[az]+)*@[az]+\./ 是
tom.ed@inter.n /^[az]+(\.[az]+)*@[az]+(\.[az]+)+/ 是
tom.ed@inter.ne /^[az]+(\.[az]+)*@[az]+(\.[az]+)+/ 是
tom.ed@inter.net /^[az]+(\.[az]+)*@[az]+(\.[az]+)+$/ 是

  1. 然后，您寻找将仅匹配 1 行的模式与前一个模式相结合的方法。

    • 因为/^[a-z]+\./，我们可以把它和 结合起来/^[a-z]+/得到/^[a-z]+\.?/。
    • 因为/^[a-z]+(\.*[a-z]+)*@/，我们可以把它和 结合起来/^[a-z]+(\.*[a-z]+)*/得到/^[a-z]+(\.*[a-z]+)*@?/。
    • 因为/^[a-z]+(\.*[a-z]+)*@[a-z]+\./，我们可以把它和 结合起来/^[a-z]+(\.*[a-z]+)*@[a-z]+/得到/^[a-z]+(\.*[a-z]+)*@[a-z]+\.?/。
    • ...

您继续，直到您对您已涵盖所有可能的情况感到满意为止。

  1. 您使用 this 将所有内容放在一起/^( ... | ... | ... | ... )/。您将在这里获得一个可能的正则表达式：

/^([a-z]+\.?|[a-z]+(\.[a-z]+)*\.?|[a-z]+(\.[a-z]+)*@|[a-z]+(\.[a-z]+)*@[a-z]+\.?|[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)*\.?|[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+)$/

她是一个更好的观点：

( [a-z]+\.?
| [a-z]+(\.[a-z]+)*\.?
| [a-z]+(\.[a-z]+)*@
| [a-z]+(\.[a-z]+)*@[a-z]+\.?
| [a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)*\.?
| [a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+ )
  1. 最后你测试看看它是否允许不需要的值

您可以在regex101.com或测试页面中执行此操作。

注意：此模式仅在用户输入值时有效。/^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+$/在提交之前，必须使用原始模式 ( ) 来验证值，以便不会将不完整的值发送到服务器。

编辑：为了使其更具可读性和可维护性，您可以这样做

var patt1 = "[a-z]+\.?";
var patt2 = "[a-z]+(\.[a-z]+)*@";
var patt3 = "[a-z]+(\.[a-z]+)*@[a-z]+\.?";
var patt4 = "[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)*\.?";
var patt5 = "[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+";

var keypressedValidator = new RegExp("^("+patt1+"|"+"+patt2+"|"+"+patt3+"|"+"+patt4+"|"+"+patt5+")$");

...

var inputValue = document.getElementById(...some Id...).value;

if ( ! inputValue.match(keypressedValidator)) {
  ... show error status or error message ...
...

推荐阅读