密码验证在 Angular 5 中不起作用

Question

我是 Angular 5 的新手，在这里我尝试根据某些条件验证用户密码。

1. 最少六个字符，至少一个字母和一个数字
2. 最少八个字符，至少一个字母、一个数字和一个特殊字符
3. 最少八个字符，至少一个大写字母、一个小写字母和一个数字

用户可以为密码字段选择上述模式之一，验证错误消息将相应更改。

对我来说，以上条件都不能正常工作。

谁能帮我解决这个问题。

注意：如果我直接在 HTML 中给出模式，它可以正常工作

app.component.html

<mat-form-field class="col-sm-12">
    <mat-label>Enter your password</mat-label>
    <input matInput placeholder="Password" [pattern]="patternNormal" [formControl]="fPassword" placeholder="Password" required>
    <mat-error *ngIf="fPassword.errors?.required">Please fill out this field</mat-error>
    <mat-error *ngIf="fPassword.errors&&fPassword.errors.pattern">{{errorMgs}}</mat-error>
</mat-form-field>

app.component.ts

export class SnackBarOverviewExample {

  //Minimum six characters, at least one letter and one number:
  patternNormal: any = "^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$";

  //Minimum eight characters, at least one letter, one number and one special character:
  patternMedium: any = "^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$";

  //Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
  patternHign: any = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}";

  fEmail = new FormControl();
  fPassword = new FormControl();
  errorMgs: string;
  selectedPattern: string;
  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {
    this.selectedPattern = 'patternNormal'; //will change based on user preference

    if (this.selectedPattern === 'patternNormal') {
      this.errorMgs = 'Password must have min 6 char,atleast 1 num and 1 char'
    } else if (this.selectedPattern === 'patternMedium') {
      this.errorMgs = 'Minimum eight characters, at least one letter, one number and one special character'
    } else if (this.selectedPattern === 'patternHign') {
      this.errorMgs = 'Minimum eight characters, at least one uppercase letter, one lowercase letter and one number'
    }

  }

Stackblitz 网址：https://stackblitz.com/edit/angular-stacb4-5oaagd?file=app%2Fsnack-bar-overview-example.ts

更新：

1，第一个模式的示例值 - abcde1（显示错误，但当我直接在 HTML 中给出模式时接受相同的值）。

Answer 1

有几个问题：

• 将模式中的所有反斜杠加倍，例如\d => \\d.
• 不需要在字符类中使用两个$。只保留一次出现为[$$$$$$] = [$]。
• this.selectedPattern = 'patternNormal'; 应该更改为 this.selectedPattern = this.patternNormal; 并且应该对所有类似的行执行相同的操作。这些是变量，不应用作字符串文字。

请参阅updated demo。

代码更改：

//Minimum six characters, at least one letter and one number:
patternNormal: any = "^(?=.*[A-Za-z])(?=.*\\d)[A-Za-z\\d]{6,}$";

//Minimum eight characters, at least one letter, one number and one special character:
patternMedium: any = "^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&])[A-Za-z\\d@$!%*#?&]{8,}$";

//Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:
patternHign: any = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$";

和

ngOnInit() {
    this.selectedPattern = this.patternNormal; //will change based on user preference

    if (this.selectedPattern === this.patternNormal) {
      this.errorMgs = 'Password must have min 6 char,atleast 1 num and 1 char'
    } else if (this.selectedPattern === this.patternMedium) {
      this.errorMgs = 'Minimum eight characters, at least one letter, one number and one special character'
    } else if (this.selectedPattern === this.patternHign) {
      this.errorMgs = 'Minimum eight characters, at least one uppercase letter, one lowercase letter and one number'
    }

  }