Duminda Chamara

Saturday, December 15, 2012

JavaScript random password generator

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.

A good password should be,

  1. At least 8 characters long.
  2. A good combination of letters, numbers and other symbols.
  3. Avoid dictionary words.
  4. Don't use your nick name,NIC,Passport,Mobile number.
  5. A combination of simple and capital letters.
  6. Don't use numbers or characters only.
  7. 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?

Numbers   Numeric characters 0 to 9
Password Length  
Password    
Generate Password  

In this example, you can generate passwords using numbers 0 to 9. You can decide the generated password length. I have limit the maximum password length to 15. Insert the length of the password that you want to generate and hit "Generate Password" button.

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>&nbsp;</td>
<td>1234567890</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td>&nbsp;</td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="3" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td>&nbsp;</td>
<td><span id="password1" class="pwd">&nbsp;</span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password();">Generate Password</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword1" type="button" class="button" id="btnGeneratePassword1" value="Generate Password" onClick="javascript:generate_password();"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

2. How to create random passwords in javascript using alphabetic characters?

Characters   Lower case and upper case letters from a to z
Password Length  
Password    
Get Password  

If you need to generate random passwords from English alphabetic, you can use this example code to do that. Generated passwords will contain lowercase and uppercase letters from A to Z.

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>&nbsp;</td>
<td>Lower case and upper case letters from a to z</td>
</tr>
<tr>
<td align="right">Password Length</td>
<td>&nbsp;</td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td>&nbsp;</td>
<td><span id="password2" class="pwd">&nbsp;</span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password2();">Generate Password</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword1" type="button" class="button" id="btnGeneratePassword1" value="Generate Password" onClick="javascript:generate_password2();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

3. How to create random passwords in javascript using alphabetic characters and numeric characters?

Characters   Lower case and upper case letters from a to z and numbers 0 to 9
Password Length  
Password    
Create Password  

This simple example shows you how to generate a random password including numeric characters and alpha numeric characters. So created password contains a combination of letters and numbers. You can set the minimum password length.

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>&nbsp;</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>&nbsp;</td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Password</td>
<td>&nbsp;</td>
<td><span id="password2" class="pwd">&nbsp;</span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password3();">Create Password</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Create Password" onClick="javascript:generate_password3();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

4. How to generate list of random passwords using JavaScript?

Characters   Lower case and upper case characters from a to z and numeric characters 0 to 9
Password Length  
Number of passwords  
Passwords    
Populate Passwords  

Suppose that you want to offer a list of randomly generated passwords to to user, this example shows that how to perform the task. User can select his preferred password from the list. here i have limit the password length to 15 characters and number of created passwords to 5. You can customize this as your wish.

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>&nbsp;</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>&nbsp;</td>
<td><input name="txtPasswordLength" type="text" id="txtPasswordLength" value="8" size="5"></td>
</tr>
<tr>
<td align="right">Number of passwords</td>
<td>&nbsp;</td>
<td><input name="txtNumberOfPasswords" type="text" id="txtNumberOfPasswords" value="8" size="5" maxlength="2"></td>
</tr>
<tr>
<td align="right">Passwords</td>
<td>&nbsp;</td>
<td><span id="password2" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:generate_password4();">Create Password</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Create Password" onClick="javascript:generate_password4();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>
Posted by Duminda Chamara at 2:32 AM

3 comments:

Beben Koben said...

usefully brother, ty

December 15, 2012 at 4:34 AM
Unknown said...

Bạn đang mong muốn có một thân hình hoàn hảo và cũng cần sử dụng những loại thuoc giam can an toan và hiệu quả, hãy click chuột. Naocell super collagen + c giúp cơ thể bổ sung hiệu quả nguồn collagen đặc biệt loại 1 và 3, bên cạnh đó tăng cường vitamin C giúp da săn chắc. Mắt bạn đang bị mờ, bạn cần loại thuoc bo mat an toàn và có hiệu quả, hãy cùng sử dụng sản phẩm này để tăng cường thị lực. collagen shiseido dạng viên bổ sung hàm lượng collagen thiếu hụt của cơ thể, làm cải thiện và làm chậm lại quá trình lão hóa, giúp duy trì làn da tươi trẻ. Gan bạn đang bị nóng hoặc bị các vấn đề về gan, hãy cùng nhau sử dụng thuốc giải độc gan để làm mát gan nào. Bạn đang có vấn đề về sinh lý, cách làm tăng kích thước cậu nhỏ này sẽ giúp bạn thoát khỏi tình trạng này ngay. Có bao nhiêu loại thuốc điều trị ung thư? hãy tin tưởng thuoc fucoidan umino shizuku thuốc hỗ trợ điều trị ung thư tốt nhất Nhật Bản.

June 23, 2015 at 7:34 PM
john said...

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

March 12, 2018 at 11:34 PM

Post a Comment

Subscribe to: Post Comments (Atom)