With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a password strength indicator using jQuery and Bootstrap for register pages.
Functionality to implement:
A progress bar to represent the strength of the password whenever users add the input to the password input form. The length of the progress bar represents the strength of the password. We are going to implement this on the front-end only.
A valid password has following criteria for evaluation: (to determine % of length contribution)
- Atleast an uppercase letter (10%), lowercase letter (10%), number (10%), special symbol(10%)
- The word length criteria:
- 6 words : 20%
- 8 words : 40%
- [10, infinty) words : 60%
- Initialize the layout:
First of all, let us initialize the layout of our register page using bootstrap. For the progress bar, we will use progress class for building progress bars from the bootstrap (irrespective of the variant/version of bootstrap used).
- Updating progress bar:
Now, we need to make sure that whenever the password input field is updated, the progress bar is updated according to the specified requirements mentioned above.
Steps to be followed:
- In the password field, check whenever key is pressed using keyup() function.
- Extract the input added in the password field.
- Update percentage variable and progress-bar color as per the password length.
- Check for char-set constraints.
- Update the width of the progress-bar.
- jQuery | :password Selector
- How to Sign In with raw password when password store in the database are hashed form in Node.js ?
- How to compare password and confirm password inputs using express-validator ?
- Node | URL.password API
- Password Verification in Node
- HTML | DOM Input Password Object
- Password Hashing with MD5 module in Node.js
- HTML | DOM Input Password value Property
- HTML | <input type="password">
- HTML | DOM Input Password name Property
- MySQL | Change User Password
- HTML | DOM Anchor password Property
- HTML | DOM Input Password autocomplete Property
- HTML | DOM Input Password maxLength Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.