Angular电子邮件验证模式以严格执行该模式

Question

我尝试使用一种模式来验证我通过表单控件从用户输入的电子邮件。

我使用以下代码来验证用户输入的电子邮件id。

‘电子邮件’：[''，[Validators.required，Validators.pattern("^a-z0-9._%+-+@a-z0-9.-+.a-z{2,4}$")]]

但是当输入"abc@abcd“时，表单就会生效，并允许用户提交。我可以看出，这种模式在这里并不受尊重。如何根据定义的模式强制验证电子邮件？

Answer 1

您可以使用以下正则表达式来正确验证电子邮件。

正则表达式：

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

如果您使用Angular Reactive forms进行验证。如下所示添加正则表达式。

email: [
    null,
    Validators.compose([
      Validators.required,
      Validators.pattern(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/),
    ]),
  ]

这些是上述正则表达式的失败场景。

• abc
• abc@cde
• abc@cde.f

成功案例

• abc@cde.fg

Answer 2

电子邮件正则表达式模式

"\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

或

new RegExp("\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*")