Angular 8 密码强度计检查方法

必备组件

• 具备 Angular 的基础知识
• 必须安装 Visual Studio Code
• 必须安装 Angular CLI
• 必须安装 Node JS

步骤 1

让我们使用以下 NPM 命令创建一个新的 Angular 项目

ng new passwordStrengthBar  

第二步

现在，让我们使用以下命令创建一个新的组件

ng g c password-strength-bar

步骤 3

现在，打开 password-strength-bar.component.html 文件，并在文件中添加以下代码

<div id="strength" style="margin:  11px">     <small>{{barLabel}}</small>     

<ul id="strengthbar">
	<li>         </li>
	<li class="point"> </li>
	<li class="point"> </li>
	<li class="point"> </li>
	<li class="point"> </li>
	<li class="point">         

步骤 4

现在，打开 password-strength-bar.component.ts 文件，并在该文件中添加以下代码

import {Component, OnChanges, Input, SimpleChange} from '@angular/core';  
  
@Component({  
  selector: 'app-passoword-strength-bar',  
  templateUrl: './passoword-strength-bar.component.html',  
  styleUrls: ['./passoword-strength-bar.component.css']  
})  
export class PassowordStrengthBarComponent implements OnChanges  {  
  
  @Input() passwordToCheck: string;  
  @Input() barLabel: string;  
  bar0: string;  
  bar1: string;  
  bar2: string;  
  bar3: string;  
  bar4: string;  
  
  private colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];  
  
  private static measureStrength(pass: string) {  
      let score = 0;  
      // award every unique letter until 5 repetitions  
      let letters = {};  
      for (let i = 0; i< pass.length; i++) {  
      letters[pass[i]] = (letters[pass[i]] || 0) + 1;  
      score += 5.0 / letters[pass[i]];  
      }  
      // bonus points for mixing it up  
      let variations = {  
      digits: /\d/.test(pass),  
      lower: /[a-z]/.test(pass),  
      upper: /[A-Z]/.test(pass),  
      nonWords: /\W/.test(pass),  
      };  
  
      let variationCount = 0;  
      for (let check in variations) {  
      variationCount += (variations[check]) ? 1 : 0;  
      }  
      score += (variationCount - 1) * 10;  
      return Math.trunc(score);  
  }  
  
private getColor(score: number) {  
  let idx = 0;  
  if (score > 90) {  
    idx = 4;  
  } else if (score > 70) {  
    idx = 3;  
  } else if (score >= 40) {  
    idx = 2;  
  } else if (score >= 20) {  
    idx = 1;  
  }  
  return {  
    idx: idx + 1,  
    col: this.colors[idx]  
  };  
}  
  
  ngOnChanges(changes: {[propName: string]: SimpleChange}): void {  
      var password = changes['passwordToCheck'].currentValue;  
      this.setBarColors(5, '#DDD');  
      if (password) {  
          let c = this.getColor(PassowordStrengthBarComponent.measureStrength(password));  
          this.setBarColors(c.idx, c.col);  
      }  
  }  
  private setBarColors(count, col) {  
      for (let _n = 0; _n < count; _n++) {  
          this['bar' + _n] = col;  
      }  
  } 
}     

步骤 5

现在，打开 password-strength-bar.component.css 文件，并添加以下代码

ul#strengthBar {  
    display:inline;  
    list-style:none;  
    margin:0;  
    margin-left:15px;  
    padding:0;  
    vertical-align:2px;  
}  
.point:last {  
    margin:0 !important;  
}  
.point {  
    background:#DDD;  
    border-radius:2px;  
    display:inline-block;  
    height:5px;  
    margin-right:1px;  
    width:20px;  
}  

步骤 6

现在，打开 app.component.html 文件，并在该文件中添加以下代码

密码强度条

<div class="container">       
<div class="row">           
<div class="col-md-8 col-md-offset-2">                  
<div class="panel panel-default">                   
<div class="panel-body">                                                      
<div class="form-group">                               Email                
<div class="col-md-6">
<div class="form-group">                               Password
<div class="col-md-6">
<app-passoword-strength-bar>   

步骤 7

现在，打开 app.component.ts 文件，并添加以下代码

import { Component, OnInit } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent implements OnInit {  
  public account = {  
    password: null  
  };  
  public barLabel: string = "Password strength:";  
  
  constructor() { }  
  
  ngOnInit() {  
  
  }  
} 

步骤 8

现在，打开 app.module.ts 文件，并添加以下代码

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { FormsModule } from '@angular/forms';  
import { AppComponent } from './app.component';  
import { PassowordStrengthBarComponent } 
from './passoword-strength-bar/passoword-strength-bar.component';  
  
@NgModule({  
  declarations: [  
    AppComponent,  
    PassowordStrengthBarComponent  
  ],  
  imports: [  
    BrowserModule,  
    FormsModule,  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { } 

步骤 9

现在，让我们使用 'npm start' 或 'ng serve' 命令运行项目并检查输出。

摘要

在本技巧中，我们学习了如何在 Angular 8 应用程序中创建密码强度条。

请提供您对本文的宝贵反馈/评论/问题。请告诉我您是否喜欢并理解了它，以及我如何改进它。

历史

• 2020年3月23日：初始版本