Angular表单邮箱多条件正则验证问题：错误消息同时显示

问题根源 #

你的代码存在三个核心问题：

1. 正则表达式语法错误：第二个验证正则末尾多了一个多余的]，导致匹配逻辑失效。
2. 验证逻辑偏差：第二个正则匹配的是整个邮箱字符串，而非需求中的@符号之前的部分，不符合业务要求。
3. 验证器独立执行：两个验证器是并行运行的，无论第一个条件是否满足，第二个都会执行检查，导致不符合第一个条件时，两个错误同时触发。

修复方案 #

1. 合并验证逻辑为单一自定义验证器 #

将两个验证条件合并到一个自定义验证器中，按顺序检查：先验证邮箱是否以字母开头，不满足则直接返回对应错误；若满足，再提取@之前的部分验证是否仅含字母数字。这样能确保同一时间只会返回一个错误。

2. 修正正则匹配逻辑 #

针对@之前的本地部分做验证，而非整个邮箱字符串。

修改后的代码 #

TypeScript部分 #

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';

@Component({
  // 保留你的组件元数据
})
export class YourComponent {
  get email() {
    return this.profileForm.get('email');
  }

  // 合并后的邮箱自定义验证器
  emailValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      if (!control.value) {
        return null; // 空值时不触发验证（required验证会处理）
      }

      // 验证条件1：邮箱以字母开头
      const startsWithLetter = /^[a-zA-Z]/.test(control.value);
      if (!startsWithLetter) {
        return { 'firstLetter': true };
      }

      // 提取@之前的本地部分
      const localPart = control.value.split('@')[0];
      // 验证条件2：@之前的部分仅含字母数字
      const onlyAlphanumeric = /^[a-zA-Z0-9]+$/.test(localPart);
      if (!onlyAlphanumeric) {
        return { 'followLetters': true };
      }

      return null; // 所有条件满足
    };
  }

  profileForm = new FormGroup({
    event: new FormControl('', Validators.required),
    selectVenue: new FormControl('', [Validators.required]),
    email: new FormControl('', [
      Validators.required,
      this.emailValidator() // 使用合并后的验证器
    ]),
    date: new FormControl('')
  });
}

HTML部分 #

HTML代码无需修改，保持原有错误消息判断逻辑即可：

<div class="form-group">
  <label for="email">Email address</label>
  <input [class.is-invalid]="email?.invalid && email?.touched" type="email" 
         class="form-control" id="email" placeholder="name@example.com" formControlName="email" 
         required>
  
  <div *ngIf="(email?.invalid && email?.touched) || email?.dirty">
    <small *ngIf="email?.errors?.['required']" class="text-danger">Email is required</small>
    <small *ngIf="email?.hasError('firstLetter')" class="text-danger">邮箱应以字母开头</small>
    <small *ngIf="email?.hasError('followLetters')" class="text-danger">仅允许字母数字字符</small>
  </div>
</div>

效果说明 #

• 当输入以数字或非字母开头时，仅显示「邮箱应以字母开头」错误。
• 当输入以字母开头，但@前包含非字母数字字符时，仅显示「仅允许字母数字字符」错误。
• 空值时由required验证触发对应错误。

内容的提问来源于stack exchange，提问作者Mohammed Salman Ali