密码强度校验

<div class="gy-form-item" >
  // 强度组件
  <password-strength [(showPasswordIntensity)]="isShowPasswordIntensity"
                     [(password)]="validateForm.password">
  </password-strength>
  
  // type                 
  <nz-input [nzType]="'password'"
            [nzPlaceHolder]="'authMgmt.iRegister.placeHolder3'|translate"
            [(ngModel)]="validateForm.password"
            (nzBlur)="passwordBlur()"
            (ngModelChange)="passwordVlidate()"
            (nzFocus)="passworFocus()">
  </nz-input>
  
  // errorMsg
  <div class="gy-form-explain">
    <span>{{validateForm.passwordVfict|translate}}</span>
  </div>
</div>



// 密码获取焦点
passworFocus() {
  this.isShowPasswordIntensity = true;
}

组件：

<div class="password-strength" *ngIf="showPasswordIntensity">
  
  <!--密码错误的时候，一直都存在的提示-->
  <div class="intensity intensity-1" *ngIf="intensityRank==0">
    <p class="tip-text-none">请至少输入6个字符。请不要使用容易被猜到的密码。</p>
  </div>
  
  <!--弱-->
  <div class="intensity intensity-1" *ngIf="intensityRank==1">
    <span class="strong-text" >强度：弱</span>
    <nz-progress [nzStrokeWidth]="6" [ngModel]="25" [nzShowInfo]="false" [nzStatus]="'exception'"></nz-progress>
    <p class="tip-text">请至少输入6个字符。请不要使用容易被猜到的密码</p>
  </div>
  
  <!--中-->
  <div class="intensity intensity-1" *ngIf="intensityRank==2">
    <span class="strong-text" style="color: #F8D247;">强度：一般</span>
    <nz-progress [nzStrokeWidth]="6" [ngModel]="50" [nzShowInfo]="false"></nz-progress>
    <p class="tip-text">请至少输入6个字符。请不要使用容易被猜到的密码</p>
  </div>
  
  <!--强-->
  <div class="intensity intensity-1" *ngIf="intensityRank>=3">
    <span class="strong-text" style="color: #6CCAC9;">强度：安全</span>
    <nz-progress [nzStrokeWidth]="6" [ngModel]="100" [nzShowInfo]="false"></nz-progress>
    <p class="tip-text">请至少输入6个字符。请不要使用容易被猜到的密码</p>
  </div>
  
</div>






private _password = ""; // 密码
public intensityRank = 0; // 强度等级
@Input() showPasswordIntensity = false; // 是否显示强度等级组件。
@Input() set password(value) {
  this._password = value || "";
  
  // 强度计算
  var modes = 0;
  if (value.length < 6) modes = 0;
  else if (value.length >= 6) {
    if (/\d/.test(value)) modes++; //数字
    if (/[a-z]/.test(value)) modes++; //小写
    if (/\_/.test(value)) modes++; // "_"
    if (/[A-Z]/.test(value)) modes++; //大写  
    if (/\W/.test(value)) modes++; //特殊字符
  }
  this.intensityRank = modes;
}
get password() {
  return this._password;
}

.password-strength {
  box-sizing: border-box;
  width: 300px;
  min-height: 60px;
  position: absolute;
  right: -310px;
  top: 0;
  padding: 16px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.20);
  border-radius: 4px;
  &:after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 12px;
    left: -4px;
    width: 0;
    height: 0;
    border-width: 4px;
    border-style: solid;
    border-color: #fff #fff transparent transparent;
    transform: rotate(-135deg);
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.10);
  }
  .ant-progress-bg{
    background-color:#F8D247;
    border-radius:4px;
  }
  .ant-progress-status-exception .ant-progress-bg{
    background-color: #FF6C61;
  }
  .ant-progress-status-success .ant-progress-bg{
    background-color: #6CCAC9;

  }
  .strong-text{
    font-size: 14px;
    color: #FF6C61;
    font-weight: 600;
  }
  .tip-text-none{
    font-size: 12px;
    color: #666666;
    line-height: 20px;
  }
  .tip-text{
    font-size: 12px;
    color: #666666;
    line-height: 20px;
    margin-top:17px;
  }

}