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

Question

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

请注意，我知道 this 和其他类似的答案提供了匹配完整电子邮件地址的出色模式。我正在寻找的内容略有不同。

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

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

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

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

• ""
• “测试”
• “test.user”
• “test.user.”
• “test.user.1@”
• “test.user.1@test”
• “test.user.1@test.best”
• “test.user.1@test.best.com”

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

• “@#$@#”
• “测试..”
• “test.user.@”
• “test.user.1@@”
• “test.user.1@test..best”
• “test.user.1@test.best@”

Answer 1

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

1. 您确定了一种使用模式输入有效值的场景：

值正则表达式匹配 ----------------- --------------------------------- -------- --------- t /^[a-z]+/ 是 到 /^[a-z]+/ 是 汤姆 /^[a-z]+/ 是 汤姆。 /^[a-z]+\./ 是 tom.e /^[a-z]+(\.[a-z]+)*/ 是 tom.ed /^[a-z]+(\.[a-z]+)*/ 是 tom.ed@ /^[a-z]+(\.[a-z]+)*@/ 是 tom.ed@i /^[a-z]+(\.[a-z]+)*@[a-z]+/ 是 tom.ed@in /^[a-z]+(\.[a-z]+)*@[a-z]+/ 是 tom.ed@int /^[a-z]+(\.[a-z]+)*@[a-z]+/ 是 tom.ed@inte /^[a-z]+(\.[a-z]+)*@[a-z]+/ 是 tom.ed@inter /^[a-z]+(\.[a-z]+)*@[a-z]+/ 是 tom.ed@inter。 /^[a-z]+(\.[a-z]+)*@[a-z]+\./ 是 tom.ed@inter.n /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+/ 是 tom.ed@inter.ne /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+/ 是 tom.ed@inter.net /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+$/ 是

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. 您使用此/^( ... | ... | ... | ... )/ 将所有内容放在一起。您可以在这里获得一个可能的正则表达式：

/^([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]+)+ )

4. 最后你测试看看它是否允许不需要的值

您可以在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 ...
...