时间戳

首页 > 解决方案 > 通过 Angular 5 模板中的正则表达式进行逗号分隔的电子邮件 ID 验证？

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

问题描述

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

允许用户输入最多 3 个 E-Mail ID，显然，每个 E-Mail ID 都会被验证。我通过以下方式实现了这一目标：

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

我的问题是：

  1. 我可以通过模板中的正则表达式将用户输入拆分为逗号分隔值吗？如果可以，如何？我现在在模板中使用的正则表达式仅检查输入是否是有效的电子邮件 ID，但不会将用户输入拆分为逗号分隔值。

  2. 另外，我如何允许用户通过正则表达式最多输入 3 个电子邮件 ID？

早些时候，它是可以通过拆分、修剪和替换字符串功能实现的。

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

标签： regexangularhtmltypescriptangular5

解决方案

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

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

在这里您可以验证正则表达式。

推荐阅读