如何在Angular 4的popup弹出框中实现密码强度校验功能

前置说明 #

你可以按需选择弹窗实现方案，以下通用实现不强制引入额外UI依赖，也可适配Angular Material MatDialog、ngx-bootstrap模态框等常用组件。 #

步骤1：封装密码强度校验工具函数 #

新建src/app/utils/password-strength.ts文件，存放通用校验逻辑，可根据业务需求调整校验规则：

export enum PasswordStrengthLevel {
  Weak = '弱',
  Medium = '中',
  Strong = '强'
}

// 校验密码强度，返回强度等级、已满足/未满足规则列表
export function checkPasswordStrength(password: string): { 
  level: PasswordStrengthLevel, 
  validRules: string[], 
  invalidRules: string[] 
} {
  // 自定义校验规则，可按需增减
  const rules = [
    { regex: /.{8,}/, text: '长度不少于8位' },
    { regex: /[A-Z]/, text: '包含至少1个大写字母' },
    { regex: /[a-z]/, text: '包含至少1个小写字母' },
    { regex: /[0-9]/, text: '包含至少1个数字' },
    { regex: /[!@#$%^&*(),.?":{}|<>]/, text: '包含至少1个特殊字符' }
  ];
  const validRules = [];
  const invalidRules = [];
  rules.forEach(rule => {
    rule.regex.test(password) ? validRules.push(rule.text) : invalidRules.push(rule.text);
  });
  // 根据已满足规则数量判定强度等级
  let level = PasswordStrengthLevel.Weak;
  if (validRules.length >= 5) level = PasswordStrengthLevel.Strong;
  else if (validRules.length >=3) level = PasswordStrengthLevel.Medium;
  return { level, validRules, invalidRules };
}

步骤2：创建密码弹窗组件 #

执行命令生成组件：ng generate component password-popup

组件逻辑文件 password-popup.component.ts #

import { Component, Output, EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';
import { checkPasswordStrength, PasswordStrengthLevel } from 'src/app/utils/password-strength';

@Component({
  selector: 'app-password-popup',
  templateUrl: './password-popup.component.html',
  styleUrls: ['./password-popup.component.css']
})
export class PasswordPopupComponent {
  @Output() close = new EventEmitter<string|null>(); // 关闭弹窗时抛出密码，取消则返回null
  passwordControl = new FormControl('');
  strengthLevel: PasswordStrengthLevel = PasswordStrengthLevel.Weak;
  validRules: string[] = [];
  invalidRules: string[] = [];

  // 输入密码时实时校验
  onPasswordInput() {
    const password = this.passwordControl.value || '';
    const res = checkPasswordStrength(password);
    this.strengthLevel = res.level;
    this.validRules = res.validRules;
    this.invalidRules = res.invalidRules;
  }

  // 强度等级对应色值
  getLevelColor() {
    const colorMap = {
      [PasswordStrengthLevel.Weak]: '#f5222d',
      [PasswordStrengthLevel.Medium]: '#faad14',
      [PasswordStrengthLevel.Strong]: '#52c41a'
    };
    return colorMap[this.strengthLevel] || '#bfbfbf';
  }

  confirm() {
    this.close.emit(this.passwordControl.value);
  }

  cancel() {
    this.close.emit(null);
  }
}

组件模板文件 password-popup.component.html #

<div class="popup-wrapper">
  <h3>设置密码</h3>
  <div class="input-group">
    <input 
      type="password" 
      placeholder="请输入密码" 
      [formControl]="passwordControl" 
      (input)="onPasswordInput()"
    >
  </div>
  <!-- 强度指示器 -->
  <div class="strength-wrap">
    <span>密码强度：<span [style.color]="getLevelColor()">{{ strengthLevel }}</span></span>
    <div class="progress-bar">
      <div 
        class="progress-fill" 
        [style.width]="(validRules.length / 5) * 100 + '%'" 
        [style.backgroundColor]="getLevelColor()"
      ></div>
    </div>
  </div>
  <!-- 校验规则展示 -->
  <div class="rules-wrap">
    <p>需满足以下要求：</p>
    <ul>
      <li *ngFor="let rule of invalidRules" class="invalid">❌ {{ rule }}</li>
      <li *ngFor="let rule of validRules" class="valid">✅ {{ rule }}</li>
    </ul>
  </div>
  <!-- 操作按钮 -->
  <div class="btn-group">
    <button (click)="cancel()">取消</button>
    <button (click)="confirm()" [disabled]="invalidRules.length > 0">确认</button>
  </div>
</div>

组件样式文件 password-popup.component.css #

.popup-wrapper {
  width: 420px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}
.input-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 12px 0;
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: #f5f5f5;
  border-radius: 3px;
  margin: 8px 0;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  transition: all 0.3s ease;
}
.rules-wrap ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0;
  font-size: 14px;
}
.rules-wrap .invalid { color: #999; }
.rules-wrap .valid { color: #52c41a; }
.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}
.btn-group button {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-group button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

步骤3：调用弹窗组件 #

在需要触发弹窗的父组件中直接引用即可，示例用*ngIf控制显隐：

父组件模板 #

<button (click)="showPwdPopup = true">设置密码</button>
<app-password-popup 
  *ngIf="showPwdPopup"
  (close)="handlePopupClose($event)"
></app-password-popup>

父组件逻辑 #

showPwdPopup = false;

handlePopupClose(password: string|null) {
  this.showPwdPopup = false;
  if (password) {
    // 处理确认提交的密码逻辑
    console.log('提交的密码：', password);
  }
}

如果使用Angular Material MatDialog，只需将PasswordPopupComponent加入模块的entryComponents数组，调用dialog.open(PasswordPopupComponent)方法即可打开弹窗。

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