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

jdm*_*air 1 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,}))$/
Run Code Online (Sandbox Code Playgroud)

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

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

  • ””
  • “测试”
  • “测试.用户”
  • “测试.用户。”
  • “test.user.1@”
  • “test.user.1@test”
  • “test.user.1@test.best”
  • “test.user.1@test.best.com”

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

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

Dom*_*tin 5

我正在简化电子邮件模式以/^[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]+/ 是
汤姆·埃德@国际米兰。/^[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. 你用这个把所有东西放在一起/^( ... | ... | ... | ... )/。您将获得以下可能的正则表达式:

/^([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]+)+ )
Run Code Online (Sandbox Code Playgroud)
  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 ...
...
Run Code Online (Sandbox Code Playgroud)