Angular中Validators.email邮箱校验不准确该如何解决？

使用@angular/forms的官方表单校验能力时，直接调用内置的Validators.email做邮箱格式校验存在规则过于宽松的问题：比如会将明显不符合通用邮箱规范的email@t判定为合法地址，无法满足常规业务的校验要求。

出现这个问题的核心原因是Angular内置的email校验仅做了最基础的格式判断：只要字符串包含@符号，且@前后存在非空内容就会判定为合法，没有对@后的域名段格式做合规校验。

可以通过自定义校验器的方式替换或补充校验规则，两种常用实现方式如下：

• 方式一：自定义严格模式邮箱校验器，完全替换内置校验逻辑

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

// 匹配通用邮箱格式的正则：要求域名段包含点号，且顶级后缀长度至少2位
const strictEmailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

export const strictEmailValidator: ValidatorFn = (control: AbstractControl) => {
  // 空值交由Validators.required处理，非空场景才做格式校验
  if (!control.value) return null;
  return strictEmailReg.test(control.value.trim()) ? null : { email: true };
};

使用时直接替换原来的Validators.email即可：

const registerForm = new FormGroup({
  userEmail: new FormControl('', [Validators.required, strictEmailValidator])
});

• 方式二：在内置校验基础上补充域名规则，不改动原有校验逻辑
  如果需要保留内置email校验的基础判断，可以在内置校验后追加域名段的校验规则：

const emailFormControl = new FormControl('', [
  Validators.email,
  (control: AbstractControl) => {
    // 已经被内置校验判定为格式错误的场景直接返回，不重复校验
    if (!control.value || control.hasError('email')) return null;
    const [, domain] = control.value.split('@');
    // 校验域名必须包含点号，且顶级域长度不小于2位
    const isValidDomain = domain.includes('.') && domain.split('.').pop().length >= 2;
    return isValidDomain ? null : { emailInvalid: true };
  }
]);

注意：不建议使用过度严苛的邮箱正则，避免误判合法的企业邮箱、新顶级域邮箱。格式校验仅做基础防呆，最严谨的邮箱有效性验证手段是发送验证邮件完成所有权确认。

内容的提问来源于stack exchange，提问作者user11913484