Angular中多密码校验规则下如何仅显示单条校验提示

要实现输入字段满足指定5条校验规则，且仅显示第一条未通过的错误提示，核心思路是自定义一个组合校验器，按优先级顺序检查所有规则，一旦发现未满足的条件立即返回对应错误，终止后续校验。

步骤1：创建自定义校验器函数 #

编写一个包含所有校验逻辑的Validator函数，按需求的优先级顺序检查规则（示例沿用原规则顺序）：

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

export function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value?.trim();
    if (!value) {
      return { required: '请输入密码' };
    }

    // 校验规则1：长度6-15字符
    if (value.length < 6 || value.length > 15) {
      return { lengthError: '密码长度需为6-15个字符' };
    }

    // 校验规则2：至少1个小写字母
    if (!/[a-z]/.test(value)) {
      return { lowercaseError: '密码需包含至少1个小写字母(a-z)' };
    }

    // 校验规则3：至少1个大写字母
    if (!/[A-Z]/.test(value)) {
      return { uppercaseError: '密码需包含至少1个大写字母(A-Z)' };
    }

    // 校验规则4：至少1个数字
    if (!/[0-9]/.test(value)) {
      return { numberError: '密码需包含至少1个数字(0-9)' };
    }

    // 校验规则5：至少1个指定特殊字符
    if (!/[*$@#]/.test(value)) {
      return { specialCharError: '密码需包含至少1个特殊字符(*$@#)' };
    }

    return null;
  };
}

步骤2：在表单中应用校验器 #

在组件的FormGroup/FormControl中添加这个自定义校验器：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordValidator } from './password.validator';

@Component({
  selector: 'app-password-input',
  templateUrl: './password-input.component.html'
})
export class PasswordInputComponent {
  passwordForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.passwordForm = this.fb.group({
      password: ['', [Validators.required, passwordValidator()]]
    });
  }

  // 获取表单控件的快捷方式
  get passwordControl() {
    return this.passwordForm.get('password');
  }
}

步骤3：模板中显示错误提示 #

在模板中根据校验器返回的错误键，显示对应的单条提示：

<form [formGroup]="passwordForm">
  <div class="form-group">
    <label>设置密码</label>
    <input 
      type="password" 
      formControlName="password"
      class="form-control"
      [class.is-invalid]="passwordControl.invalid && (passwordControl.dirty || passwordControl.touched)"
    >
    <!-- 错误提示区域 -->
    <div class="invalid-feedback" *ngIf="passwordControl.invalid && (passwordControl.dirty || passwordControl.touched)">
      <span *ngIf="passwordControl.hasError('required')">请输入密码</span>
      <span *ngIf="passwordControl.hasError('lengthError')">{{ passwordControl.getError('lengthError') }}</span>
      <span *ngIf="passwordControl.hasError('lowercaseError')">{{ passwordControl.getError('lowercaseError') }}</span>
      <span *ngIf="passwordControl.hasError('uppercaseError')">{{ passwordControl.getError('uppercaseError') }}</span>
      <span *ngIf="passwordControl.hasError('numberError')">{{ passwordControl.getError('numberError') }}</span>
      <span *ngIf="passwordControl.hasError('specialCharError')">{{ passwordControl.getError('specialCharError') }}</span>
    </div>
  </div>
</form>

说明 #

• 校验器会按顺序检查规则，第一条未通过的规则会直接返回错误，后续规则不再执行，因此模板只会显示第一条错误提示。
• 如果需要调整错误提示的优先级，只需修改校验器中规则的检查顺序即可。

内容的提问来源于stack exchange，提问作者The Losers Club