DEV Community

Cover image for Validate passwords with JS
Walter Nascimento
Walter Nascimento

Posted on

2

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.

Code

First let’s create the interface, we’ll do something simple, using just HTML.

<h1>Validator Password</h1>
<input type="password">
<span></span>
Enter fullscreen mode Exit fullscreen mode

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";
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Demo

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay