密码复杂度指示器

PasswordComplexityIndicatorService 用于计算密码复杂度。

• 在 PasswordComplexityIndicatorService 中设置默认值：

  • 颜色
  • 文本
  • 复杂度要求

• 如何设置默认值

    colors: string[] = ['#B0284B', '#F2A34F', '#5588A4', '#3E5CF6', '#6EBD70'];
  
    texts: string[] = ['弱', '一般', '普通', '良好', '强'];
  
    requirements: RegexRequirementsModel = {
      minLengthRegex: /(?=.{6,})/,                                        // 默认最小长度6
      numberRegex: /(?=.*[0-9])/,                                         // 默认包含数字
      lowercaseRegex: /(?=.*[a-z ])/,                                     // 默认包含小写字母
      uppercaseRegex: /(?=.*[A-Z])/,                                      // 默认包含大写字母
      specialCharacterRegex: /[^a-zA-Z0-9 ]+/,                            // 默认包含特殊字符
    };
  

• 确保这些值的数组长度相等（我们的服务包含 5 个测试/颜色/文本）。

• PasswordComplexityIndicatorService 仅有一个方法 validatePassword，该方法接收密码作为参数并返回进度条属性。

• validatePassword 方法返回一个 ProgressBarStats 类型 的对象。

• interface ProgressBarStats{
    bgColor: string,
    text?: string,
    width: number
  })
  

• 使用此对象来修改 密码复杂度条

  • bgColor： 决定进度条的颜色。
  • text： 向用户解释进度条的含义。
  • width： 决定进度条的填充程度。

使用方法

很简单，假设您有一个密码输入框，想在下方添加复杂度指示器。在此输入框下方放置此组件：

  <abp-password-complexity-indicator [progressBar]="ProgressBarStatsObject" />

• 将密码传递给 PasswordComplexityIndicatorService 的 validatePassword 方法，并将返回值绑定到 abp-password-complexity-indicator 的 progressBar 属性。

• 建议使用本地化文本，而非直接使用文本值。

• en.json

    ....
    "Strength": "强度",
    "Weak": "弱！",
    "Fair": "一般。",
    "Normal": "普通。",
    "Good": "良好。",
    "Strong": "强！"
  

如何自定义

• 若要更改测试数量，请确保 PasswordComplexityIndicatorService 中 colors、texts、regex 数组的长度相等，否则将无法正常工作。
• 如果更改了任何文本，必须同时更新本地化文件。
• 完成以上步骤后，即可开始输入密码测试！