在 Angular 5 的模板中通过正则表达式进行逗号分隔的电子邮件 ID 验证？

Question

我在 Angular 中有一个项目 5. 有一个电子邮件 ID 的输入字段。我想实现以下目标：

允许用户最多输入 3 个电子邮件 ID，显然，每个电子邮件 ID 都会被验证。我是通过以下方式实现的：

在我的 ts 文件中创建一个函数：我将用户输入拆分为逗号分隔值，并将它们存储在一个数组中。
我将数组的最大长度设置为 3，并通过遍历它来验证数组的每个元素，并根据条件在模板上显示相关的错误消息。
正在调用函数 (ngModelChange)

我的旧模板代码：

<div class="form-group col-md-6">
    <label for="mailingList">Mailing Lists ( Max 3 Email IDs ) </label>
    <input type="email" multiple class="form-control formgroup" placeholder="Enter Comma Separated Mailing Lists (Max 3)" [(ngModel)]="team.mailingList" name="mailingList" (ngModelChange)="validateMailingLists()" required>
    <p *ngIf="!emailValid" class="red">{{ errorMessage }} </p>
</div>

这是我的旧 ts 代码：

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

validateMailingLists() {
    const sanitizedEmail = this.team.mailingList.replace(/,\s*$/, '').trim().split(',');
    this.emailValid = sanitizedEmail.every(email => emailRegex.test(email));
    if (this.emailValid === false) {
        this.errorMessage = 'Please enter valid E-Mail ID(s)';
    } 
    else if (sanitizedMailingList.length > 3) {
        this.emailValid = false;
      this.errorMessage = 'You can enter max 3 Email ID(s)';
    }
}

但是，我没有创建函数然后在 ngModelChange 上调用它，而是尝试对模板本身进行验证。

这是我目前尝试过的方法：

新模板代码：

<label for="mailingList">Mailing Lists ( Max 3 Email IDs ) </label>
<span class="red">*</span>
<span class="red" *ngIf="mailingList.errors && (mailingList.touched || mailingList.dirty)">Invalid E-Mail ID(s) </span>
<input type="email" multiple class="form-control formgroup" placeholder="Enter Comma Separated Team Mailing List (Max 3)" [(ngModel)]="team.mailingList" name="mailingList" pattern="^(([^<>()\[\]\.,;:\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,}))$" #mailingList="ngModel" mailingList required>

我的问题是：

我可以通过模板中的正则表达式将用户输入拆分为逗号分隔值吗？如果可以，怎么做？我现在在模板中使用的正则表达式仅检查输入是否为有效的电子邮件 ID，但不会将用户输入拆分为逗号分隔值。
此外，如何允许用户通过正则表达式最多只能输入 3 个电子邮件 ID？

早些时候，它是可以通过拆分、trim 和替换字符串函数实现的。

我已经搜索了很多，但没有找到任何解决方案。谢谢。

Answer 1

您可以使用以下正则表达式：

^(\s?[^\s,]+@[^\s,]+\.[^\s,]+\s?,)*(\s?[^\s,]+@[^\s,]+\.[^\s,]+)$

Here 你可以验证正则表达式。

Answer 2

使用此正则表达式验证 3 个电子邮件地址。

^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}),?\s*){1,3}$

注意：{1,3} 允许用户输入最多 3 个电子邮件 ID。

在 Angular 5 的模板中通过正则表达式进行逗号分隔的电子邮件 ID 验证？

Comma-separated E-Mail ID validation via Regex in template in Angular 5?

html

regex

typescript

angular

angular5