Question

我需要验证密码输入表单字段的强度要求是：
- 至少一个小写字母 - 至少一个大写的字母 - 至少一个号码（无论顺序如何）

到目前为止我搜索和尝试的内容如下所示，结果不一致。它似乎验证了正则表达式验证的顺序我需要的是检查是否存在至少一个char“类型” 谢谢

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

我使用Angular的内置模式验证器对此进行了尝试，并且能够提出以下检查：

长度至少为8个字符
小写字母
大写字母
数字

特殊字符

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

我补充一点，我绝不是一名正则表达式专家。对于与OP密切相关的案例，这对我来说简直是有用的。也许它会帮助别人。 Mozilla的文档帮助我解决了这个问题，特别是Writing a regular expression pattern部分。

Answer 2

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

自定义验证器

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

如果您查看Validator.js，您会发现您可以将字符串或正则表达式文字都传递给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}$/)
 ]]
});

正则表达式详细信息

请注意，我建议的模式更改仅与the principle of contrast相关：

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

Answer 4

为了更全面，这是一个Validator正则表达式，它实际上有效并且包含所有符号：

必须具有数字，必须具有小写字母，必须具有大写字母，并且必须具有标准qwerty键盘上可能的任何其他符号之一。

确保在打字稿或JavaScript中，每个斜杠都正确地加倍。

Validators.pattern('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[`~!@#$%^&\\\\*\\\\(\\\\)\\\\-_=\\\\+\\\\{\\\\}\\\\[\\\\]|\\\\\\\\:;"\\'<>,\\\\.?\\\\/]).{8,}')

Answer 5

以下解决方案认为密码要求的参数可能是动态的

该方法动态生成模式字符串

  passRequirement = {
    passwordMinLowerCase: 1,
    passwordMinNumber: 1,
    passwordMinSymbol: 2,
    passwordMinUpperCase: 1,
    passwordMinCharacters: 8
  };
  pattern = [
    `(?=([^a-z]*[a-z])\{${this.passRequirement.passwordMinLowerCase},\})`,
    `(?=([^A-Z]*[A-Z])\{${this.passRequirement.passwordMinUpperCase},\})`,
    `(?=([^0-9]*[0-9])\{${this.passRequirement.passwordMinNumber},\})`,
    `(?=(\.\*[\$\@\$\!\%\*\?\&])\{${this.passRequirement.passwordMinSymbol},\})`,
    `[A-Za-z\\d\$\@\$\!\%\*\?\&\.]{${
      this.passRequirement.passwordMinCharacters
    },}`
  ]
    .map(item => item.toString())
    .join("");
  resetPwdForm = this.fb.group({
    newpwdctrlname: ['Passwod1@@5', [Validators.required, Validators.pattern(this.pattern)]],
    shownewpwdctrlname: ['', []],
    rptpwdctrlname: ['', [Validators.required]]
  });
  constructor (private fb: FormBuilder) {}

查看此demo on stackblitz

Answer 6

Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[$@$!%*?&])(?=[^A-Z]*[A-Z]).{8,30}$/)

如何使用Angular 5 Validator Pattern验证密码强度

6 个答案: