Angular中新建用户时如何实现符合邮箱规范的用户名校验？

校验规则 #

• 强制规则：输入的用户名必须包含@符号
• @符号前的本地用户名段允许输入的字符：
  • 英文大小写字母（A-Z、a-z）
  • 0-9数字
  • 特殊字符：! # $ % & ' * + - / = ? ^ _ ` { | ( ) , : ; < > @ [ \ ]
• @符号后的域名段仅允许输入的字符：
  • 英文大小写字母（A-Z、a-z）
  • 0-9数字
  • 连字符（-）
  • 英文句点（.）

具体实现 #

直接基于Angular响应式表单的自定义校验器能力实现，代码可直接复用：

1. 自定义校验器代码 #

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

export function emailUsernameValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const input = control.value?.trim() ?? '';
    // 先校验必须存在@符号
    if (!input.includes('@')) {
      return { missingAt: true };
    }

    // 取第一个@做拆分，兼容本地段允许带@的规则
    const splitIndex = input.indexOf('@');
    const localPart = input.slice(0, splitIndex);
    const domainPart = input.slice(splitIndex + 1);

    // 本地段字符规则正则，所有特殊字符已做合规转义
    const localReg = /^[A-Za-z0-9!#$%&'*+\-/=?^_`{|}(),:;<>@\[\]\\]+$/;
    // 域名段字符规则正则
    const domainReg = /^[A-Za-z0-9\-.]+$/;

    if (!localPart || !localReg.test(localPart)) {
      return { invalidLocal: true };
    }

    if (!domainPart || !domainReg.test(domainPart)) {
      return { invalidDomain: true };
    }

    return null;
  };
}

正则已对所有特殊字符做转义处理，不会出现语法报错；域名段正则未包含@字符，若输入内容出现多个@会自动判定域名段不合规，符合规则要求。

2. 表单中接入使用 #

在新建用户的表单组件里引入校验器，绑定到对应用户名控件上，配套错误提示即可：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { emailUsernameValidator } from 'src/app/validators/email-username.validator';

@Component({
  selector: 'app-user-create',
  template: `
    <form [formGroup]="createForm" (ngSubmit)="handleSubmit()">
      <div class="form-item">
        <label>登录用户名（邮箱格式）</label>
        <input formControlName="username" placeholder="请输入邮箱用户名">
        <div class="error-tip" *ngIf="createForm.get('username')?.touched && createForm.get('username')?.errors as err">
          <span *ngIf="err.missingAt">用户名必须包含@符号</span>
          <span *ngIf="err.invalidLocal">@符号前的内容包含不允许的特殊字符</span>
          <span *ngIf="err.invalidDomain">@符号后的域名仅支持字母、数字、连字符、英文句点</span>
        </div>
      </div>
      <button type="submit" [disabled]="createForm.invalid">确认新建</button>
    </form>
  `
})
export class UserCreateComponent {
  createForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.createForm = this.fb.group({
      username: ['', [Validators.required, emailUsernameValidator()]]
    });
  }

  handleSubmit() {
    if (this.createForm.valid) {
      // 此处编写新建用户接口提交逻辑
    }
  }
}

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