How to generate a random password in JavaScript?

In many times it is needed to generate a random password for a website. For example, on registration system of a website a password can be generated for the account by clicking a button. Every time the user clicks the button, a new password will be generated.

In this tutorial, we are going to see how to generate a random password every time a user clicks a button. When users click the button, an HTML text input field will fill up with the randomly generated password.

Making a simple JavaScript form validator

Stop form submission using JavaScript preventDefault() Event Method

Here our password will be between the length of 8 to 16 characters. We will take characters set which will form the password and as we also take the length as random between 8 to 16 characters, so the number of characters may be anything between this range.

Below is our JavaScript function to create the random password:

function random_password_generate(max,min)
{
    var passwordChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#@!%&()/";
    var randPwLen = Math.floor(Math.random() * (max - min + 1)) + min;
    var randPassword = Array(randPwLen).fill(passwordChars).map(function(x) { return x[Math.floor(Math.random() * x.length)] }).join('');
    return randPassword;
}

The above function will return a password that contains characters between 0 – 9, a – z, #,@,!,%,&,(,) and /. The length of characters will lie between 8 to 16 and determine the code given below:

Math.floor(Math.random() * (max - min + 1)) + min;

In the above code, we just have to mention the maximum and minimum characters length. As we have built our JavaScript function, so we just have to put the maximum and minimum characters length as the parameter of the function.

How To Generate Random Password In PHP?

The usage of random password generator function

To use the function we just need to provide the parameter. Suppose we want the randomly generated password between 8 and 16 characters. So we need to call the function just like:

random_password_generate(16,8);

Complete code example of generating random password by clicking button

Now below is the code which will generate password whenever clicking on the button:

<input type="text" name="randomPassword" id="randomPassword">
<button id="generatePassword">Generate Password</button>

<script type="text/javascript">

function random_password_generate(max,min)
{
    var passwordChars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz#@!%&()/";
    var randPwLen = Math.floor(Math.random() * (max - min + 1)) + min;
    var randPassword = Array(randPwLen).fill(passwordChars).map(function(x) { return x[Math.floor(Math.random() * x.length)] }).join('');
    return randPassword;
}

document.getElementById("generatePassword").addEventListener("click", function(){
    random_password = random_password_generate(16,8);
    document.getElementById("randomPassword").value = random_password;
});

</script>

The password will be set as the value of an HTML input type text box. We have set click event listener to the button to set a random password in the input box. Every time a user clicks the button, it will generate a new password.

I hope you like this tutorial.