Angular 正则表达式电子邮件域接受和不接受验证

Question

个人电子邮件 ID 仅接受 gmail 和 yahoo 域 企业邮箱 ID 不接受 gmail 和 yahoo 域

个人电子邮件 ID 正则表达式验证有效，而企业电子邮件 ID 正则表达式验证无效。

如何修复企业电子邮件 ID 正则表达式验证？

请查看 stackblitz 示例

HTML

<form [formGroup]="registerProfileForm" novalidate>
  <span><b>Indiviual Email Id accept only the gmail and yahoo domain</b></span>
  <div>
    <label for="vendorEmailId">Indiviual Email Id<span class="required-field">*</span></label>
    <input class="form-control" maxlength="100" formControlName="indiviualEmailId"  type="email">
  </div>
  <span class="text-danger"
                  *ngIf="registerProfileForm.controls?.indiviualEmailId?.hasError('pattern')">
                  Please enter a valid email domain name 
                  </span>
  <br />
  <br />
  <br />
  <br />
  <br />
  <span><b>Business Email Id not accept  the gmail and yahoo domain</b></span>

  <div>
    <label for="vendorEmailId">Business Email Id<span class="required-field">*</span></label>
    <input class="form-control" maxlength="100" formControlName="businessEmailId"  type="email">
  </div>
  <span class="text-danger"
                    *ngIf="registerProfileForm.controls?.businessEmailId?.hasError('pattern')">
                    Please enter a valid email domain name 
                    </span>
</form>

ts

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  registerProfileForm: FormGroup;
  emailValidatorBusiness = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(!gmail|!yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$/;

  emailValidatorIndiviual = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(gmail|yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
  constructor(
    private formBuilder: FormBuilder){
      this.registerProfileForm = this.formBuilder.group({
        indiviualEmailId: new FormControl('',[Validators.required,Validators.pattern(this.emailValidatorIndiviual)]),
        businessEmailId: new FormControl('',[Validators.required,Validators.pattern(this.emailValidatorBusiness)])
      })
    }
}

演示：https://stackblitz.com/edit/angular-ivy-3sbonz?file=src/app/app.component.ts

Answer 1

替代方案：使用 Angular 验证器

例如Validators.email() 如中所述： Angular 5 - form validation e-mail

在那里你可以找到an answer combining validators 喜欢：

this.validations_form = this.formBuilder.group({
    email: new FormControl('', Validators.compose([
           Validators.required,
           Validators.email
    ]))
});

在第二步中，您可以测试主机的主要有效电子邮件。 例如。每个案例都有一个正则表达式和不同的断言：

• 断言企业电子邮件不匹配gmail|yahoo
• 断言私人电子邮件是否匹配gmail|yahoo

见：

• Regular expression not matching specific string
• Regular expression to match a line that doesn't contain a word

单独修复正则表达式

使用正则表达式的电子邮件验证很难： How can I validate an email address using a regular expression?

不过，如果正则表达式不起作用，让我们比较一下：

不工作

emailValidatorBusines，预期接受标准：：

1. 不 匹配任何 gmail 域
2. 不 匹配任何 yahoo 域

^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(!gmail|!yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$

不同部分：(!gmail|!yahoo)

工作

emailValidatorIndiviual，预期接受标准：

1. 匹配任何gmail域
2. 匹配任何yahoo域

^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(gmail|yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$

不同部分：(gmail|yahoo)