如何在 regex 模式中接受逗号分隔的值 Angular

Question

我有一个 textarea 组件来接受这些regex模式。

UserExamble.com,user@,@examble.com,@examble.com

现在我已经实现了以上所有的模式，但是在textarea中，应该有多个用逗号隔开的值，比如说. UserExamble.com,user@ 或 UserExamble.com,user@,@examble.com,@examble.com. 这是我无法实现的，如何才能做到这一点？

以下是我的代码。

this.userPolicyForm = this.fb.group({
  senderRadioBtn: ['Any'],
  senderEmailaddress: ['', [Validators.required, Validators.pattern(ValidationPatternConfig.userPolicyEmailAddressPattern)]]
});

和

ValidationPatternConfig.userPolicyEmailAddressPattern=

"^(([^<>()\\[\\]\\\\,;:\\s@\\\"]+(\\.[^<>()\\[\\]\\\\,;:\\s@\\\"]+)*)|(\\\".+\\\")){1,64}@(\\[ipv6:){1}(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))\\]$" 

+"|"+

"^[A-Za-z0-9+.!#$%&'*+/=?^_`{|}~-]{1,64}@\\[(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\\]$"

+"|"+

"^(([^<>()\\[\\]\\\\,;:\\s@\\\"]+(\\.[^<>()\\[\\]\\\\,;:\\s@\\\"]+)*)|(\\\".+\\\")){1,64}@((\\[[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,}))$"

+"|"+

"^$|^((?!\\.)[\\w-_.]*[^.])(@\\w+)(\\.\\w+(\\.\\w+)?[^.\\W])$"

+"|"+

"^([a-zA-Z0-9!#$%&'*+\\/=?^_`\\{|\\}~\\-.]*[^@,\\]\\[<>:;\"()])@$"

+"|"+

"^@(([a-zA-Z0-9]*([-a-zA-Z0-9]*[a-zA-Z0-9]*)\\.)+[a-zA-Z0-9]*([-a-zA-Z0-9]*[a-zA-Z0-9]))$"

我使用的是 reactive forms 在 angular.

我看了几个stackoverflow的答案，但都不行。我是一个新的角度和regex，需要帮助。

Answer 1

你可以做的一件事是创建自定义的电子邮件验证器。

this.userPolicyForm = this.fb.group({
  senderRadioBtn: ['Any'],
  senderEmailaddress: ['', [Validators.required, CustomValidators.validateEmail()]]
});

创建一个新文件 custom-validator.ts

import { AbstractControl, FormControl } from '@angular/forms';

export class CustomValidators {
  // validating array of emails
  static validateEmail() {
    return (control: FormControl) => {
      const pattern = new RegExp('^([a-z0-9\\+_\\-]+)(\\.[a-z0-9\\+_\\-]+)*@([a-z0-9\\-]+\\.)+[a-z]{2,6}$', 'i');
      let validEmail = true;
      if (control.value !== null) {
        const emails = control.value.replace(/\s/g, '').split(',').filter((mail: any) => mail.trim());
        for (const email of emails) {
          if (email && !pattern.test(email)) {
            validEmail = false;
          }
        }
      }
      return validEmail ? null : { invalid_email: true };
    };
  }
}

在 html，您可以添加

<div *ngIf="userPolicyForm.controls.senderEmailaddress.hasError('invalid_email')">
    Email address must be valid
</div>

由此，你可以在反应式表单中进行验证。另外，当你提交电子邮件数组时，你可以将其裁剪后发送给API。

Answer 2

你可以决定你想在文本框中传递的模式，然后创建2个部分的regex，一个包含模式，最后是逗号和贪婪的+，第二个部分只包含模式。

像这样。

let pattern = "(?:[A-z0-9]+@[A-z]+\.[A-z]{2,6})|(?:[A-z0-9]+@[A-z]+)|(?:@[A-z0-9]+\.[A-z]{2,6})|(?:[A-z0-9]\.[A-z]{2,6})"

var regexPattern = '/(?:' + pattern + '[,])+' + pattern + '/'
var regex = new RegExp(regexPattern)
console.log("UserExamble.com,[email protected],@examble.com,run.com", regex.test("UserExamble.com,[email protected],@examble.com,run.com"))

你可以用这个单一的regex来验证输入。