Password Strength checker is very useful thing for websites that allow user registration and password resets. Because most users want to rush up the process, and usually don’t give much attention to their password strength, which leads to poor security, and passwords that can be cracked easily. So keeping in that mind, lets create a password strength checker using jQuery, which advice users to make their password stronger.
I have created a HTML form, which includes two password fields and an indicator element which tells user whether the password is strong enough or not. Just remember the id of these fields, because we need to specify them in jQuery part below.
I assume you have similar password fields as above in your registration form page, which is good thing because you just have to add a DIV element for the indicator, and we can skip CSS styling part here and move directly to jQuery. Here we are going to use regular expression to test the strength of the password.
Please have a look at regular expression below. The first one is weak password only containing 5 characters or more, medium password consist of lower characters and at least one digit, strong password must have a lower case character, at least one digit and upper case character, and very strong password must contain one special character along with digits and upper case characters.
Now we have our regular expression ready, we just need to test user password against these expressions, for that we will use jQuery .keyup() method. The keyup event gets triggered when the user releases a key on the keyboard, allowing our code to run as the user types the characters on the field.
For the second password field, we just need to check whether its string matches with the first one and notify the user. Hence, again using the keyup() method we will achieve the same.