Check password safety with JavaScript while typing

You can show password strength to your visitors while typing before even submitting the page to the webserver. There are four character groups: letters, caps, numbers and symbols. A password which is longer than 7 characters and contains at least one character from each group is strong vz537gnjua. A password which is at least 8 character long and has all characters from one group is weak (but not very weak). A password which contains all characters from one group and at least 20 characters long is also strong. Rules are easy: longer is better, combined is the best.

Demo:

Type your password!


Strong Password Examples:

Qw#45678
Qw4567890123
a234567890123456
12345678901234567890
abcdefghijklmnoprstu



Code:

<script language="javascript">

function check_password_safety(pwd){

var msg = "";
var points = pwd.length;
var password_info = document.getElementById('password_info');

var has_letter		= new RegExp("[a-z]");
var has_caps		= new RegExp("[A-Z]");
var has_numbers		= new RegExp("[0-9]");
var has_symbols		= new RegExp("\\W");

if(has_letter.test(pwd)) 	{ points += 4; }
if(has_caps.test(pwd)) 		{ points += 4; }
if(has_numbers.test(pwd)) 	{ points += 4; }
if(has_symbols.test(pwd)) 	{ points += 4; }


if( points >= 24 ) {
	msg = '<span style="color: #0f0;">Your password is strong!</span>';
} else if( points >= 16 ) {
	msg = '<span style="color: #00f;">Your password is medium!</span>';
} else if( points >= 12 ) {
	msg = '<span style="color: #fa0;">Your password is weak!</span>';
} else {
	msg = '<span style="color: #f00;">Your password is very weak!</span>';
}

password_info.innerHTML = msg ;
}


</script>

<input type="text" name="pwd" id="pwd" size="20" onkeyup="return check_password_safety(this.value);" />

<span id="password_info"><b>Type your password!</b></span>

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <b> <pre> <h1> <h2> <h3> <h4> <h5> <h6> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <style><img> <br> <blockquote>
  • Lines and paragraphs break automatically.
  • You may insert videos with [video:URL]

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

CafeWebmaster.com(CW) is a free online community for webdevelopers and beginners. Anybody can share their code, articles, tips, tutorials, code-examples or other webdesign related material on the site. Newbies can submit their questions and reply to existing questions. CW does not guarantee or warrant reliability of code, data and information published on the site. Use the site on your own risk. The site takes no responsibility of direct or indirect loss or any kind of harm to its users. The site also doesn't take responsibility of infected files or source code with any kind of infection or viruses, worms, spywares, malwares, trojan horses. CW reserves the right to edit, move, or delete any of content for any reason.