How to generate random password using JavaScript?
The following example explains you how to create random passwords in JavaScript
Passwords are very important when you using the Internet. For a moment, think how many passwords that you have to use in a day-today life? When you are log into your computer you have to enter the password, Then sing into Facebook,Gmail,HotMail or any other mail program or social network you have to enter your password. Why we need passwords? because we have to protect our data from other people. Hackers, Malicious programs even your friends try to stole you password. So you have to use strong passwords for your accounts.
When your are developing web applications that creating user registration forms, you may need to provide random passwords for user login. In such cases you can easily use JavaScript to generate random passwords. following sample programs shows you how create random passwords with different combination of letters, numbers and other characters.
A good password should be,
- At least 8 characters long.
- A good combination of letters, numbers and other symbols.
- Avoid dictionary words.
- Don't use your nick name,NIC,Passport,Mobile number.
- A combination of simple and capital letters.
- Don't use numbers or characters only.
- Change your password regularly.
If you use dictionary words as your password you may be a victim of a dictionary attack. So always try to use strong passwords. Also remember that don't use same password for all your accounts.
When your are developing web applications that creating user registration forms, you may need to provide random passwords for user login. In such cases you can easily use JavaScript to generate random passwords. following sample programs shows you how create random passwords with different combination of letters, numbers and other characters.
1. How to create random passwords in JavaScript using numbers?
Complete source code for populate random password using numbers.
<!DOCTYPE HTML>
<html>
<head>
<title>Create Random Java script Passwords</title>
<style type="text/css">
.javascript_random_passwords{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_random_passwords .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_random_passwords input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .message{color:#F00;}
.javascript_random_passwords .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_random_passwords .pwd{font-size:16px;color:#FF0000;}
.javascript_random_passwords .link{color:#FF0000;}
</style>
<script type="text/javascript">
function generate_password(){
var password_numbers=Array('1','2','3','4','5','6','7','8','9','0');
var password_length = document.getElementById("txtPasswordLength");
if(isNaN(password_length.value) || parseInt(password_length.value)==0 || (password_length.value.replace(/\s+$/,"")=="")){
alert("Please enter valid password length");
password_length.select();
password_length.focus();
return false;
}
var pwdLen=parseInt(password_length.value);
var password='';
var len=0;
for(var i=0;i<pwdLen;i++){
password+=password_numbers[Math.floor(Math.random()*password_numbers.length)];
}
document.getElementById("password1").innerHTML=password;
}
</script>
</head>
<body>
<form id="generate_random_passwords_1" name="generate_random_passwords_1" action="#" method="post">
<table border="0" class="javascript_random_passwords">
<tr>
<td align="right">Numbers</td>
<td> </td>
<td>1234567890</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td> </td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="3" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td> </td>
<td><span id="password1" class="pwd"> </span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password();">Generate Password</a></td>
<td> </td>
<td><input name="btnGeneratePassword1" type="button" class="button" id="btnGeneratePassword1" value="Generate Password" onClick="javascript:generate_password();"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
2. How to create random passwords in javascript using alphabetic characters?
Complete Javascript source code for generate password with letters.
<!DOCTYPE HTML>
<html>
<head>
<title>Create Random Javascript Passwords with characters</title>
<style type="text/css">
.javascript_random_passwords{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_random_passwords .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_random_passwords input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .message{color:#F00;}
.javascript_random_passwords .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_random_passwords .pwd{font-size:16px;color:#FF0000;}
.javascript_random_passwords .link{color:#FF0000;}
</style>
<script type="text/javascript">
function generate_password2(){
var password_characters='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var password_length = document.getElementById("txtPasswordLength");
if(isNaN(password_length.value) || parseInt(password_length.value)==0 || (password_length.value.replace(/\s+$/,"")=="")){
alert("Please enter valid password length");
password_length.select();
password_length.focus();
return false;
}
var pwdLen=parseInt(password_length.value);
pwdLen=(pwdLen<=15)?pwdLen:15;
var password='';
var len=0;
for(var i=0;i<pwdLen;i++){
password+=password_characters.charAt(Math.floor(Math.random()*password_characters.length))
}
document.getElementById("password2").innerHTML=password;
}
</script>
</head>
<body>
<form id="generate_random_passwords_2" name="generate_random_passwords_2" action="#" method="post">
<table border="0" class="javascript_random_passwords">
<tr>
<td align="right">Characters</td>
<td> </td>
<td>Lower case and upper case letters from a to z</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td> </td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td> </td>
<td><span id="password2" class="pwd"> </span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password2();">Generate Password</a></td>
<td> </td>
<td><input name="btnGeneratePassword1" type="button" class="button" id="btnGeneratePassword1" value="Generate Password" onClick="javascript:generate_password2();"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</form>
</body>
</html>
3. How to create random passwords in javascript using alphabetic characters and numeric characters?
Copy and paste bellow code populate strong password in JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>Create Random Javascript Passwords with characters</title>
<style type="text/css">
.javascript_random_passwords{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_random_passwords .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_random_passwords input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .message{color:#F00;}
.javascript_random_passwords .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_random_passwords .pwd{font-size:16px;color:#FF0000;}
.javascript_random_passwords .link{color:#FF0000;}
</style>
<script type="text/javascript">
function generate_password3(){
var password_characters='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var password_length = document.getElementById("txtPasswordLength");
if(isNaN(password_length.value) || parseInt(password_length.value)==0 || (password_length.value.replace(/\s+$/,"")=="")){
alert("Please enter valid password length");
password_length.select();
password_length.focus();
return false;
}
var pwdLen=parseInt(password_length.value);
pwdLen=(pwdLen<=15)?pwdLen:15;
var password='';
var len=0;
for(var i=0;i<pwdLen;i++){
password+=password_characters.charAt(Math.floor(Math.random()*password_characters.length))
}
document.getElementById("password2").innerHTML=password;
}
</script>
</head>
<body>
<form id="generate_random_passwords_3" name="generate_random_passwords_3" action="#" method="post">
<table border="0" class="javascript_random_passwords">
<tr>
<td align="right">Characters</td>
<td> </td>
<td>Lower case and upper case letters from a to z and numeric characters 0 to 9</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td> </td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td> </td>
<td><span id="password2" class="pwd"> </span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password3();">Create Password</a></td>
<td> </td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Create Password" onClick="javascript:generate_password3();"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</form>
</body>
</html>
4. How to generate list of random passwords using JavaScript?
Copy and paste bellow code for create a random password list using Javascript.
<!DOCTYPE HTML>
<html>
<head>
<title>Create Random Javascript Passwords with characters</title>
<style type="text/css">
.javascript_random_passwords{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_random_passwords .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_random_passwords input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_random_passwords .message{color:#F00;}
.javascript_random_passwords .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_random_passwords .pwd{font-size:16px;color:#FF0000;}
.javascript_random_passwords .link{color:#FF0000;}
</style>
<script type="text/javascript">
function generate_password4(){
var password_characters='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var password_length = document.getElementById("txtPasswordLength");
var number_of_passwords = document.getElementById("txtNumberOfPasswords");
if(isNaN(password_length.value) || parseInt(password_length.value)==0 || (password_length.value.replace(/\s+$/,"")=="")){
alert("Please enter valid password length");
password_length.select();
password_length.focus();
return false;
}
if(isNaN(number_of_passwords.value) || parseInt(number_of_passwords.value)==0 || (number_of_passwords.value.replace(/\s+$/,"")=="")){
alert("Please enter number of passwords that you need");
number_of_passwords.select();
number_of_passwords.focus();
return false;
}
var pwdLen=parseInt(password_length.value);
pwdLen=(pwdLen<=15)?pwdLen:15;
var NoOfPwd=parseInt(number_of_passwords.value);
NoOfPwd=(NoOfPwd<=5)?NoOfPwd:5;
var passwords='';
for(j=0;j<NoOfPwd;j++){
for(var i=0;i<pwdLen;i++){
passwords+=password_characters.charAt(Math.floor(Math.random()*password_characters.length))
}
passwords+='<br/>';
}
document.getElementById("password2").innerHTML=passwords;
}
</script>
</head>
<body>
<form id="generate_random_passwords_4" name="generate_random_passwords_4" action="#" method="post">
<table border="0" class="javascript_random_passwords">
<tr>
<td align="right">Characters</td>
<td> </td>
<td>Lower case and upper case letters from a to z and numeric characters 0 to 9</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td> </td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Number of passwords</td>
<td> </td>
<td><input name="txtNumberOfPasswords" type="text" id="txtNumberOfPasswords" value="8" size="5" maxlength="2"></td>
</tr>
<tr>
<td align="right">Passwords</td>
<td> </td>
<td><span id="password2" class="pwd" style="height:auto;"> </span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password4();">Create Password</a></td>
<td> </td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Create Password" onClick="javascript:generate_password4();"></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</form>
</body>
</html>
2 comments:
usefully brother, ty
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog.
Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India .
or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai
Post a Comment