Validate passwords with JS

[Clique aqui para ler em português]

Simple project to validate password cracking difficulty, using javascript to set as strong password.

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) {
    if (input.value.length <= min_week_password && (input_week || input_medium || input_strong)) {
      text.textContent = "Your password is too week";
    }
    if (input.value.length >= min_medium_password && ((input_week && input_medium) || (input_medium && input_strong) || (input_week && input_strong))) {
      text.textContent = "Your password is medium";
    }
    if (input.value.length >= min_strong_password && input_week && input_medium && input_strong) {
      text.textContent = "Your password is strong";
    }
  }
}

Here we have the javascript code that does all the magic, where we first get the password elements and the span element, in the password element we add a listening that is activated whenever it receives some data and calls the validPassword function.

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.

Youtube

If you prefer to watch it, see the development on youtube.

Thanks for reading!

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! 😊😊