regex Angular如何使用验证最少8个字符包括1个大写1个小写1个数字1个特殊字符

我希望它显示在我的html元素使用ngif最少8个字符，包括1大写1小写1数字1特殊字符

register.component.html

<form [formGroup]="registerForm" novalidate>
  <label for="pNumber" class="text-primary">PASSWORD*</label>
  <input type="text" id="passWord" class="form-control form-rounded" placeholder="Ilagay ang Password"
    formControlName="passWord" #passWord />
  <ul *ngIf="registerForm.get('passWord')?.errors?.['pattern']">
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('has8Letter')">
      <i class="fa fa-check-circle-o text-danger" aria-hidden="true"></i> &nbsp; At
      least 8 characters
    </li>
    <li *ngIf="registerForm.get('passWord')?.hasError('hasCapitalCase')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 Capital Letter and 1 Small Letter
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('hasNumber')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 Number
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passWord')?.hasError('hasSpecialCharacter')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp; At
      least 1 non-alphanumeric character
    </li>
    <li class="text-danger" *ngIf="registerForm.get('passwordMatch')?.hasError('passwordMismatch')">
      <i class="fa fa-check-circle-o" aria-hidden="true"></i> &nbsp;
      Password is Match
    </li>
  </ul>
</form>

register.component.ts

registerForm!:FormGroup
  constructor(private fb: FormBuilder ){
    let hasNumber = /\d/
    let hasCapitalCase = /[A-Z][a-z]/

    let hasSpecialCharacter = /[ [!@#$%^&*()_+-=[]{};':"|,.<>/
    let has8Letter = /.{8,}/
    this.registerForm = new FormGroup({
      phoneNumber: new FormControl(null,[
        Validators.required,
       
      ]),
      passWord :new FormControl(null , Validators.compose([
        Validators.required,
        Validators.pattern(hasNumber),
        Validators.pattern(hasCapitalCase),
        Validators.pattern(hasSpecialCharacter),
        Validators.pattern(has8Letter),
       // Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[$@$!%*?&])(?=[^A-Z]*[A-Z]).{8}$/)
      ])),
      passwordMatch: fb.control(null,[
      Validators.required,
     
      ]),
      email:fb.control(null,[
        Validators.required
      ]),
      designation:fb.control(null,[
        Validators.required
      ]),
      fName:fb.control(null ,[Validators.required]),
      mName:fb.control(null ,[Validators.required]),
      lName:fb.control(null ,[Validators.required]),
      sName:fb.control(null ,[Validators.required]),
      birthday:fb.control(null ,[Validators.required]),
      province:fb.control(null ,[Validators.required]),
      city:fb.control(null ,[Validators.required]),
      barangay:fb.control(null ,[Validators.required]),
    }),
    {
      validators: this.passwordMatchValidator // Add any other validators as necessary
    }
  }
  passwordMatchValidator(control: AbstractControl): ValidationErrors | null {
    const password = control.get('passWord')?.value;
    const confirmPassword = control.get('passwordMatch')?.value;
  
    if (password !== confirmPassword) {
      control.get('passwordMatch')?.setErrors({ passwordMismatch: true });
    } else {
      control.get('passwordMatch')?.setErrors(null);
    }
    return null;
  }
}

预期如下

请看一下，我加了这样的解决方案
https://stackblitz.com/edit/validator-formgroup-multi-pattern-scxyuf

如何实现：

private regexValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
  return control?.value && regex.test(control.value) ? null : error;
};

}
下一个方法用于显示这些错误在FormControl错误字段中“注册”。

getErrorKeys(controlName) {
  return Object.keys(this.formGroup.controls[controlName].errors);
 }

用途：

Validators.compose([
      Validators.required,
      this.regexValidator(new RegExp(/.{8,}/), {
        min8Chars: true,
      }),
      this.regexValidator(this.hasSpecialCharacter, {
        missSpecialCharacter: true,
      })])

regex Angular如何使用验证最少8个字符包括1个大写1个小写1个数字1个特殊字符

1条答案

相关问题

热门标签

最新问答