I have implemented a RegEx pattern to validate passwords entered by users. The password must contain at least 1 capital letter, 1 number, and 1 symbol:
/(?=.*?\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[^a-zA-Z\d])/
When this RegEx is used with ng-pattern in an input field of type password, it works correctly for inputs like Mike123@ or Mike123*. However, an error is thrown when entering Mike123***:
SyntaxError: Invalid regular expression: /^Mik123***$/: Nothing to repeat
The RegEx functions properly here: https://regex101.com/r/j0O4aw/1. Here is the code snippet where the RegEx is applied:
<div class="input_fieldholder">
<input type="password"
class="m-b-0 login_typefield"
placeholder="Password"
name="password"
ng-class="{ form_error: vm.formObject.password.$dirty && vm.formObject.password.$invalid }"
ng-model="vm.password"
ng-minlength="6"
ng-change="vm.onChangePassword()"
ng-pattern="/(?=.*?\d)(?=.*?[a-z])(?=.*?[A-Z])(?=.*?[^a-zA-Z\d])/"
required
ng-attr-autofocus="{{ vm.autoFocus }}">
<div class="text-left m-t-3">
<div ng-show="vm.formObject.password.$dirty && vm.formObject.password.$error.required" class="text-danger">{{ 'PASSWORD_REQUIRED_VALIDATION' | translate }}</div>
<div ng-show="vm.formObject.password.$dirty && vm.formObject.password.$error.minlength" class="text-danger">{{ 'PASSWORD_LENGTH_VALIDATION' | translate }}</div>
<div ng-show="vm.formObject.password.$dirty && vm.formObject.password.$error.pattern" class="text-danger">{{ 'PASSWORD_PATTERN_VALIDATION' | translate }}</div>
</div>
</div>
<div class="input_fieldholder">
<input type="password"
class="m-t-10 m-b-0 login_typefield"
placeholder="Confirm Password"
name="confirmPassword"
ng-class="{ form_error: vm.formObject.confirmPassword.$dirty && vm.formObject.confirmPassword.$invalid }"
ng-model="vm.confirmPassword"
ng-pattern="vm.password"
ng-change="vm.onChangePassword()"
required
compare-field-selector="[name='password']">
<div class="text-left m-t-3">
<span ng-show="vm.formObject.confirmPassword.$dirty && vm.formObject.confirmPassword.$invalid" class="text-danger">{{'PASSWORD_CONFIRM_VALIDATION' | translate }}</span>
</div>
</div>
I am looking for a solution to this issue. Can you provide any suggestions?