使用角度 2 进行验证答案

【问题标题】：Validation using angular 2使用角度 2 进行验证
【发布时间】：2018-03-30 20:18:23
【问题描述】：

您好，使用 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>

请帮帮我

提前致谢

【问题讨论】：

使用异步验证器。
这是针对 Angular 1.x 还是 2.x+ 的？请确保不要混淆标签。
@sundeep：请更正标签，它们是混合的。
这适用于 Angular 2.x+

标签： angular angular-validation

【解决方案1】：

大写验证器示例：

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

用法：

app.component.html

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

app.component.ts

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

Live demo

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

大写：/[A-Z]/
小写：/[a-z]/
号码：/[0-9]/
特殊字符：取决于您认为什么是特殊字符。

【讨论】：

【解决方案2】：

为此最好使用正则表达式，

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

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

【讨论】：