代码之家 › 专栏 › 技术社区 › jdmcnair

Javascript中通过RegEx对电子邮件地址进行渐进式验证

regex javascript

jdmcnair · 技术社区 · 6 年前

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

this 以及其他类似的答案,为匹配完整的电子邮件地址提供了极好的模式。我要找的有点不同。

我想知道,给定一个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,}))$/

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

""
“测试”
"测试用户."
"测试用户.1@"
"测试用户.1@测试"
"测试用户.1@test.best.com"

不匹配:

“测试..”
"测试用户.1@@"
"测试用户.1@test.best最佳@"

1 回复 | 直到 6 年前

Dominique Fortin 6 年前

/^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+$/ 简化方法步骤。

您可以标识一个场景,用于输入具有模式的有效值:

Value             regex                                     matches
----------------- ----------------------------------------- ---------
t                 /^[a-z]+/                                 Yes
to                /^[a-z]+/                                 Yes
tom               /^[a-z]+/                                 Yes
tom.              /^[a-z]+\./                               Yes
tom.e             /^[a-z]+(\.[a-z]+)*/                      Yes
tom.ed            /^[a-z]+(\.[a-z]+)*/                      Yes
tom.ed@           /^[a-z]+(\.[a-z]+)*@/                     Yes
tom.ed@i          /^[a-z]+(\.[a-z]+)*@[a-z]+/               Yes
tom.ed@in         /^[a-z]+(\.[a-z]+)*@[a-z]+/               Yes
tom.ed@int        /^[a-z]+(\.[a-z]+)*@[a-z]+/               Yes
tom.ed@inte       /^[a-z]+(\.[a-z]+)*@[a-z]+/               Yes
tom.ed@inter      /^[a-z]+(\.[a-z]+)*@[a-z]+/               Yes
tom.ed@inter.     /^[a-z]+(\.[a-z]+)*@[a-z]+\./             Yes 
tom.ed@inter.n    /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+/    Yes
tom.ed@inter.ne   /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+/    Yes
tom.ed@inter.net  /^[a-z]+(\.[a-z]+)*@[a-z]+(\.[a-z]+)+$/   Yes

然后,寻找将仅与上一个模式匹配一行的模式组合起来的方法。
- /^[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]+)*@[a-z]+(\.[a-z]+)+ )

最后,您测试它是否允许不需要的值

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 ...
...