First let’s create the interface, we’ll do something simple, using just HTML.
<h1>Validator Password</h1> <input type="password"> <span></span>
In this code we have only one input that will receive the password and the span where it will be displayed if the password is strong, medium or weak.
"use strict"; const input = document.querySelector("input"); const text = document.querySelector("span"); input.addEventListener('input', validPassword); let regExpWeak = /[a-z]/; let regExpMedium = /d+/; let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/; let min_week_password = 3; let min_medium_password = 6; let min_strong_password = 6; function validPassword() let input_week = input.value.match(regExpWeak); let input_medium = input.value.match(regExpMedium); let input_strong = input.value.match(regExpStrong); if (input.value) input_strong)) text.textContent = "Your password is too week"; if (input.value.length >= min_medium_password && ((input_week && input_medium)
in validPassword the input data is checked and compared with the Regex, if the password entered is valid in some regex it is weak, if it is valid in more than one it is average and if it is valid in all it is strong.
To make the password more valid, a minimum length was added for each password, but of course it can be edited to make it more compatible with your project.
ready simple like that.
See below for the complete working project.
If you prefer to watch it, see the development on youtube.
If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you later! 😊😊