密码验证在 Angular 5 中不起作用 [英] Password validation is not working in Angular 5

问题描述

我是 angular 5 的新手，在这里我试图根据某些条件验证用户密码.

I am new to angular 5 ,Here I am trying to validate user password based on some conditions .

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

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

User can choose one of the above pattern for the password field the validation error message will change accordingly.

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

For me non of the above conditions are working correctly.

谁能帮我解决这个问题.

can anyone help me to solve this .

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

app.component.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

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

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

更新:

1，第一个模式的样本值 - abcde1(显示错误，但当我直接在 HTML 中给出模式时，接受相同的值).

1,sample value for first pattern - abcde1 (showing error but same value is accepted when I give the pattern directly in HTML).

推荐答案

有几个问题:

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

• Double all the backslashes in the patterns, e.g. \d => \\d.
• There is no need using two $ in character classes. Keep just one occurrence as [$$$$$$] = [$].
• this.selectedPattern = 'patternNormal'; should be changed to this.selectedPattern = this.patternNormal; and the same should be done to all similar lines. These are variables and should not be used as string literals.

查看更新的演示.

代码更改:

//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'
    }

  }

这篇关于密码验证在 Angular 5 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！