Password Generator with Strength Checker in JavaScript

Reading Time: 5 minutes

Inside this article we will see the concept i.e Password Generator with Strength Checker in JavaScript Example Tutorial. Article contains the classified information about Building a Simple Password Strength Checker in Javascript.

Having a secured and strong password is always important to web applications to avoid the chances of Brute force attack or any other security breach.

Read More: How To Encrypt and Verify Password in PHP Tutorial

Let’s get started.

Application Programming

Create a folder say password-generator in your localhost directory. Create two files into it:

  • index.html
  • validate.js

Design Sign Up Form

Open index.html and write this code into it. It will create the frontend form where user can generate password.

<!DOCTYPE html>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Password Generator with Strength Checker in JavaScript</title>
	<link rel="stylesheet" href="">
	<script src=""></script>
	<script src=""></script>
	<script src="validate.js"></script>
		#strengthWrapper {
			width: 200px;
			height: 35px;
			border-radius: 3px;

	<div class="container">
		<h4>Password Generator with Strength Checker in JavaScript</h4>
		<div class="row">
			<div class="col-md-6">
				<div class="col-md-12">
					<form name="form" class="form" action="#" method="post">
						<div class="row">
							<div class="form-group col-md-6" style="padding: 0px 2px 0px 15px">
								<input type="text" name="password" id="password" class="form-control" placeholder="Password..">
							<div class="form-group col-md-4" style="padding: 1px 2px 3px 1px">
								<input type="button" id="generatePassword" class="btn btn-primary btn-md" value="Generate Password">
						<div class="row hidden" id="strengthSection">
							<div class="form-group col-md-6">
								<div id="strengthWrapper">
									<div class="form-control" id="strength"></div>


Read More: Useful JavaScript console.log() Tricks Which You Need To Know

Strong Password Generator Settings

Open validate.js file and write this complete code into it.

$(document).ready(function() {

    $("#password").keyup(function() {

    $("#generatePassword").click(function() {

        var password = Array(20).fill('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz~!@-#$')
            .map(x => x[Math.floor(crypto.getRandomValues(new Uint32Array(1))[0] / (0xffffffff + 1) * x.length)]).join('');



function validatePassword() {
    var pass = $("#password").val();
    if (pass != "") {
        if (pass.length <= 8) {
            $("#strength").css("background-color", "#FF0000").text("Very Weak").animate({ width: '200px' }, 300);
        if (pass.length > 8 && (pass.match(/[a-z]/) || pass.match(/\d+/) || pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/))) {
            $("#strength").css("background-color", "#F5BCA9").text("Weak").animate({ width: '200px' }, 300);
        if (pass.length > 8 && ((pass.match(/[a-z]/) && pass.match(/\d+/)) || (pass.match(/\d+/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)) || (pass.match(/[a-z]/) && pass.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)))) {
            $("#strength").css("background-color", "#FF8000").text("Good").animate({ width: '200px' }, 300);
        if (pass.length > 8 && pass.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,24}$/)) {
            $("#strength").css("background-color", "#00FF40").text("Strong").animate({ width: '200px' }, 300);
    } else {
        $("#strength").animate({ width: '200px' }, 300);

Application Testing

Open browser and type your application URL:

URL: http://localhost/password-generator/index.html

Whenever you type any password value into input, it will check it’s strength.

Read More: Laravel Check For File Existence Inside Storage Location

Next, if you want to generate a strong password instead of typing. Click on Generate Password button.

We hope this article helped you to learn Password Generator with Strength Checker in JavaScript Tutorial in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.

Sanjay KumarHello friends, I am Sanjay Kumar a Web Developer by profession. Additionally I'm also a Blogger, Youtuber by Passion. I founded Online Web Tutor and Skillshike platforms. By using these platforms I am sharing the valuable knowledge of Programming, Tips and Tricks, Programming Standards and more what I have with you all. Read more