如何使用角度 5 验证器模式验证密码强度

Question

我需要验证密码输入表单字段的强度。要求是：

< li >至少一个小写字符 < li >至少一个大写字符 < li >至少一个号码< br >(无论顺序)

我迄今为止搜索和尝试的结果如下，结果不一致。

它似乎验证了正则表达式验证的顺序。
我需要的是检查是否存在至少一个字符“类型”。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.scss']
})
export class SignupComponent {

    form: FormGroup;

    constructor() {
        this.init();
    }

    init() {
        this.form = this.fb.group({
            name: ['', [Validators.required]],
            email: ['', [Validators.required, Validators.email],
            password: ['', [
                Validators.required, 
                Validators.pattern('((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,30})')
            ]]
        }); 
    }
}

Answer 1

如果您看一下Validator.js，您会注意到您可以将一个字符串或一个正则表达式文字传递给< code>Validators.pattern。

作为字符串文字传递的正则表达式

• 整个字符串必须与模式匹配（即模式锚定在两侧）
• 反斜杠可以形成字符串转义序列，您必须使用双反斜杠来定义用于定义正则表达式转义的文本反斜杠。因此，要定义数字匹配模式，请使用'\\d'；要定义空白模式，请用'\\s'；要想定义反斜杠，请使用“\\\\'

正则表达式作为正则表达式文字传递

• 正则表达式不会自动要求全字符串匹配。
• 使用单个反斜杠定义正则表达式转义（例如/\s/）

因此，您可以使用以下两种方法之一：

this.form = this.fb.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email],
    password: ['', [
        Validators.required, 
        Validators.pattern('(?=\\D*\\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z]).{8,30}')
 ]]
});

或

this.form = this.fb.group({
    name: ['', [Validators.required]],
    email: ['', [Validators.required, Validators.email],
    password: ['', [
        Validators.required, 
        Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=[^A-Z]*[A-Z]).{8,30}$/)
 ]]
});

正则表达式详细信息

请注意，我建议的图案变化仅仅是那些与对比原则相关的变化：

• ^-字符串的开始（隐含在字符串正则表达式模式中）
• （？=\D*\d）-必须有1位
• (? =[^a-z]*[a-z]）-必须有1个小写ASCII字母
• (? =[^A-Z]*[A-Z]）-必须有1个大写ASCII字母
• .{8,30}-除换行符之外的任何8到30个字符
• $-字符串结束（隐含在字符串正则表达式模式中）。

Answer 2

我无法正确使用验证器模式，所以我制作了一个自定义验证器，并使用三个简单的正则表达式验证密码字段字符串。
无论如何，我期待正确使用Angular Validator模式。

自定义验证程序

// password.validator.ts

import { FormControl } from '@angular/forms';

export interface ValidationResult {
    [key: string]: boolean;
}

export class PasswordValidator {

    public static strong(control: FormControl): ValidationResult {
        let hasNumber = /\d/.test(control.value);
        let hasUpper = /[A-Z]/.test(control.value);
        let hasLower = /[a-z]/.test(control.value);
        // console.log('Num, Upp, Low', hasNumber, hasUpper, hasLower);
        const valid = hasNumber && hasUpper && hasLower;
        if (!valid) {
            // return what´s not valid
            return { strong: true };
        }
        return null;
    }
}

用我的自定义验证器替换了验证器模式

// signup.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { PasswordValidator } from 'validators/password.validator';

@Component({
    selector: 'signup',
    templateUrl: './signup.component.html',
    styleUrls: ['./signup.component.scss']
})
export class SignupComponent {

    form: FormGroup;

    constructor() {
        this.init();
    }

    init() {
        this.form = this.fb.group({
            name: ['', [Validators.required]],
            email: ['', [Validators.required, Validators.email],
            password: ['', [
                Validators.required, 
                PasswordValidator.strong
            ]]
        }); 
    }
}

Answer 3

我用Angular的内置模式验证器尝试了一下，能够得出以下检查:

>

长度至少为 8 个字符

小写字母

大写字母

数字

特殊字符

password: [
  '',
  [
    Validators.required,
    Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
   ]
]

我要补充的是，我绝不是正则表达式专家。这就是我在一个与OP密切相关的案例中使用的方法。也许它会帮助其他人。Mozilla的文档在解决这个问题上帮助很大，特别是编写正则表达式模式部分。