windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add new password validator

Browse Source
This commit is contained in:
zhiqiang feng
2022-09-02 17:18:31 +08:00
parent fbd894c133
commit 4490ddd5ab
3 changed files with 88 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/pages.component.html
+17 -10
View File
@@ -116,13 +116,25 @@
<input type="password" nz-input formControlName="newPassword" placeholder="新密码" (ngModelChange)="updateConfirmValidator()">
<nz-form-explain *ngIf="validateForm.get('newPassword').dirty && validateForm.get('newPassword').errors">
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('required')">
请输入新密码!
请输入新密码!<br/>
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('minlength')">
最小2个字符!
最小8个字符!<br/>
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('maxlength')">
最大15个字符!
最大15个字符!<br/>
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasNumber')">
<br/>必须有数字!
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasSpecialCharacters')">
必须有特殊字符!<br/>
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasCapitalCase')">
必须有大写字母!<br/>
</ng-container>
<ng-container *ngIf="validateForm.get('newPassword')?.hasError('hasSmallCase')">
必须有小写字母!
</ng-container>
</nz-form-explain>
</nz-form-control>
@@ -135,15 +147,10 @@
<ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('required')">
请再次输入新密码!
</ng-container>
<ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('confirm')">
<ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('NoPassswordMatch')">
两次密码不一致!
</ng-container>
<ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('minlength')">
最小2个字符!
</ng-container>
<ng-container *ngIf="validateForm.get('confirmPassword')?.hasError('maxlength')">
最大15个字符!
</ng-container>
</nz-form-explain>
</nz-form-control>
</nz-form-item>
src/app/pages/pages.component.ts
+39 -3
View File
@@ -5,6 +5,9 @@ import { OperateSpinServiceService } from '../services/operate-spin-service.serv
import { HttpClientService } from '../services/http-client.service';
import { NzMessageService } from 'ng-zorro-antd';
// add custom password validator
import { CustomValidators } from '../utils/custom-validators';
import {
FormBuilder,
FormControl,
@@ -82,9 +85,42 @@ export class PagesComponent implements OnInit {
this.validateForm = this.fb.group({
oldPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
newPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
confirmPassword: ['', [Validators.required, this.confirmationValidator, Validators.minLength(2), Validators.maxLength(15)]],
});
// newPassword: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(15)]],
newPassword: [
null,
Validators.compose([
Validators.required,
// check whether the entered password has a number
CustomValidators.patternValidator(/\d/, {
hasNumber: true
}),
// check whether the entered password has upper case letter
CustomValidators.patternValidator(/[A-Z]/, {
hasCapitalCase: true
}),
// check whether the entered password has a lower case letter
CustomValidators.patternValidator(/[a-z]/, {
hasSmallCase: true
}),
// check whether the entered password has a special character
CustomValidators.patternValidator(
/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/,
{
hasSpecialCharacters: true
}
),
Validators.minLength(8),
Validators.maxLength(15),
])
],
// confirmPassword: ['', [Validators.required, this.confirmationValidator, Validators.minLength(2), Validators.maxLength(15)]],
confirmPassword: [null, Validators.compose([Validators.required])],
},
{
// check whether our password and confirm password match
validator: CustomValidators.passwordMatchValidator
}
);
}
confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
src/app/utils/custom-validators.ts
+28
View File
@@ -0,0 +1,28 @@
import { ValidationErrors, ValidatorFn, AbstractControl } from '@angular/forms';
export class CustomValidators {
static patternValidator(regex: RegExp, error: ValidationErrors): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } => {
if (!control.value) {
// if control is empty return no error
return null;
}
// test the value of the control against the regexp supplied
const valid = regex.test(control.value);
// if true, return no error (no error), else return error passed in the second parameter
return valid ? null : error;
};
}
static passwordMatchValidator(control: AbstractControl) {
const password: string = control.get('newPassword').value; // get password from our password form control
const confirmPassword: string = control.get('confirmPassword').value; // get password from our confirmPassword form control
// compare is the password math
if (password !== confirmPassword) {
// if they don't match, set an error in our confirmPassword form control
control.get('confirmPassword').setErrors({ NoPassswordMatch: true });
}
}
}