How to add password validation using regular expression in angularjs according to certain criterion?

Question

I want to validate password entered by user for following criteria :

Password should be at least 8 characters long and should contain one number,one character and one special character.

For it I used following regular expression :

^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$

I tried this expression in my angularjs code as below :

<md-input-container class="md-block" style="margin-top:0px;">
            <label>Password</label> <md-icon
                md-svg-src="/images/icons/ic_lock_black_24px.svg" class="name"></md-icon>
            <input type="password" ng-model="newUser.userPassword"
                name="userPassword" required 
                ng-pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$">
            <div
                ng-messages="registerForm.userPassword.$error">
                <div ng-message="pattern">Password should be atleast 8 characters long
                    and should contain one number,one character and one special
                    character</div>
                <div ng-message="required">Password should be atleast 8 characters
                    long and should contain one number,one character and one special
                    character</div>
            </div>
            </md-input-container>

In my above code the error message displays when the password field is blank and focus is lost. If user enters a password which doesn't satisfy the criteria I mentioned the error message doesn't show up.

How should I fix this issue? Somebody please help me.

Answer 1

You can use this regex pattern it will work fine:

"/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/".

But you need to write it in .ts file (controller class) because if you write regex in .html file as the 'type' of the input field is a 'password' you will always throw the error "Invalid password". Because you are writing a regex to check the alphanumeric and special character input but as the input field is of type password then this regex will check the encrypted input which will always fail the case.

Answer 2

As far as i understood your problem. Check your console It might be broken on lexical errors.

You forgot slash at start and at end of ng-pattern. Please use ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/"

I have created a plunk which might help you. https://plnkr.co/edit/qCjp6a?p=preview

Answer 3

I took a stab at this with Angular's built-in pattern validator and was able to come up with the following that checks for:

• At least 8 characters in length
• Lowercase letters
• Uppercase letters

• Numbers Special characters

  password: [ '', [ Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}') ] ]

I'll add that I'm by no means a regex expert. This is simply what worked for me for a closely related case to the OP. Maybe it will help someone else. Mozilla's documentation helped a lot in figuring this out, specifically the Writing a regular expression pattern section.

Answer 4

Just a couple notes

1) The above contains one redundant $. It should be ng-pattern="/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/"

2) Don't remove leading ^ and trailing $ as it prevents from entering white spaces

3) If you want to define the pattern in controller then

$scope.passwordStrength = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/; and <input ng-pattern="passwordStrength">

but never

$scope.passwordStrength = "/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/";

as the pattern is a RegExp object, not a string.

Hope this will help you save some time.