如何在Angular中实现验证字符串含字母和数字的自定义表单验证器

1. 正确的正则表达式 #

要验证字符串同时包含至少一个字母（大小写均可）和至少一个数字，可以使用带正向预查的正则表达式：

^(?=.*[A-Za-z])(?=.*\d).+$

• (?=.*[A-Za-z])：正向预查，确保字符串中存在至少一个字母
• (?=.*\d)：正向预查，确保字符串中存在至少一个数字
• ^ 和 $：限定匹配整个字符串，避免部分匹配

2. 完善自定义验证器函数 #

将正则整合到你已有的验证器中，同时处理控件值为空的场景（空值验证可配合Validators.required单独处理）：

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

export function containsLettersAndNumbers(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    
    // 若控件值为空，直接返回null（交由required验证处理）
    if (!value) return null;

    const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d).+$/;
    const isValid = passwordPattern.test(value);

    return isValid ? null : { containsLettersAndNumbers: true };
  };
}

3. 在响应式表单中使用验证器 #

在组件的表单构建逻辑中，将自定义验证器添加到密码控件：

import { FormBuilder, Validators } from '@angular/forms';
import { containsLettersAndNumbers } from './path-to-your-validator';

// ...

this.registerForm = this.fb.group({
  // 其他表单控件
  password: ['', [
    Validators.required,
    containsLettersAndNumbers() // 添加自定义验证器
  ]]
});

4. 模板中显示错误提示 #

在模板中针对验证失败的情况展示提示信息：

<input type="password" formControlName="password" placeholder="请输入密码">
<div *ngIf="registerForm.get('password')?.hasError('containsLettersAndNumbers')">
  密码必须同时包含字母和数字
</div>

5. 模板驱动表单的pattern写法 #

如果使用模板驱动表单，也可以直接通过pattern属性实现，注意正则不需要包裹/：

<input 
  type="password" 
  name="password" 
  ngModel 
  required
  pattern="^(?=.*[A-Za-z])(?=.*\d).+$"
>
<div *ngIf="password.errors?.['pattern']">
  密码必须同时包含字母和数字
</div>

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