web-dev-qa-db-ja.com

Angular 5 Validatorパターンでパスワードの強度を検証する方法

パスワード入力フォームフィールドの強度を検証する必要があります。
要件は次のとおりです。
-少なくとも1つの小文字
-少なくとも1つの大文字
-少なくとも1つの番号
（順序に関係なく）

私がこれまでに検索して試したことは以下になりますが、結果には一貫性がありません。正規表現の検証の順序を検証するようです。
必要なのは、少なくとも1つのchar "types"が存在するかどうかを確認することです。
ありがとう

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})')
            ]]
        }); 
    }
}
regexangularvalidation
16
guillefd

私はこれに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 セクションを理解するのに大いに役立ちました。

22
Desmond

Validator Patternを正しく使用できなかったため、カスタムValidatorを作成し、3つの単純な正規表現でパスワードフィールド文字列を検証しました。
とにかく、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
            ]]
        }); 
    }
}
13
guillefd

Validator.js を見ると、文字列または正規表現リテラルの両方をValidators.patternに渡すことができます。

文字列リテラルとして渡される正規表現

  • 文字列全体がパターンと一致する必要があります（つまり、パターンは両側に固定されています）
  • バックスラッシュは文字列エスケープシーケンスを形成できます。正規表現エスケープの定義に使用されるリテラルバックスラッシュを定義するには、二重バックスラッシュを使用する必要があります。したがって、数字一致パターンを定義するには、'\\d'を使用し、空白パターンを定義するには'\\s'を使用し、バックスラッシュを定義するには、'\\\\'を使用します。

正規表現リテラルとして渡された正規表現

  • 正規表現は、完全な文字列一致を自動的に要求しません。
  • 単一のバックスラッシュを使用して、正規表現エスケープを定義します（例：/\s+/）

したがって、使用できるのは次の2つです。

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])-小文字のASCII文字が1つ必要です
  • (?=[^A-Z]*[A-Z])-大文字のASCII文字が1つ必要です
  • .{8,30}-改行文字以外の8〜30文字
  • $-文字列の終わり（文字列正規表現パターンで暗黙的）。
3
Wiktor Stribiżew