使用角度 2 进行验证

Question

嗨，使用angular 2作为密码字段，我必须设置“密码应该至少有1个大写字母，1个小写字母，1个数字，1个特殊字符，最少8个字符，最多16个字符”

因为我已经完成了“最少8个字符，最多16个字符”。

但我无法为其余的东西设置至少1个大写字母，1个小写字母，1个数字，1个特殊字符。

<div class ="form-group">
  <label> Password </label>
   <input class ="form-control" name ="password" #password="ngModel" [(ngModel)] = "angulaService.selectedAngula.password" 
   placeholder="password"  minlength="8" maxlength="16" >

   <div class="form-control-feedback"
   *ngIf="password.errors && (password.dirty || password.touched)">
  <p *ngIf="password.errors.required">Password is required</p>
  <p *ngIf="password.errors.minlength">Password must be min  8 characters long</p>
 </div>
  <div class="form-control-feedback"
    *ngIf="password.errors && (password.dirty || password.touched)">
    <p *ngIf="password.errors.required">Password is required</p>
    <p *ngIf="password.errors.maxlength">Password should not be greater than  16 characters long</p>
  </div>
</div>

请帮我一下

预先感谢

Answer 1

最好使用Regex，

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]

（您已经在检查最小长度和最大长度，因此无需在正则表达式中设置长度限制，但您仍然可以通过正则表达式进行此操作。尽管我建议将这两个错误分开。）

Answer 2

大写验证器示例:

import { Directive } from '@angular/core';
import {NG_VALIDATORS, AbstractControl, ValidationErrors, Validator} from '@angular/forms';

@Directive({
  selector: '[uppercaseValidator]',
  providers: [{provide: NG_VALIDATORS, useExisting: UppercaseValidatorDirective, multi: true}]
})
export class UppercaseValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const value = control.value
    return /[A-Z]/.test(value) ? null : { uppercase: 'Must contain at least one upper case character'}
  }
}

用法：

应用程序组件.html

<form>
  <input uppercaseValidator [(ngModel)]="uppercase" #uppercaseCtrl="ngModel" name="uppercase"/>
  <div *ngIf="uppercaseCtrl.hasError('uppercase')">At least one character must be uppercased</div>
</form>

应用程序组件

<form>
  <input uppercaseValidator [(ngModel)]="uppercase" #uppercaseCtrl="ngModel" name="uppercase"/>
  <div *ngIf="uppercaseCtrl.hasError('uppercase')">At least one character must be uppercased</div>
</form>

现场演示

按照创建自定义验证指令的相同步骤创建其他验证程序。您只需要更改正则表达式和错误消息。您可以使用以下正则表达式：

• 大写：/[A-Z]/
• 小写：/[a-z]/
• 编号：/[0-9]/
• 特殊性格：取决于你认为什么是特殊性格