Check the form to see if password entered is easy

Question

I want to create a script so that in the registration form I have, check the most used and less secure password.

That is, check for example passwords written by users and do not allow logging, such as the following passwords:

• abc123
• abcdef
• 123456
• qwerty123
• 98765

The idea is to have more security in the accounts of users who create accounts on my site

Answer 1

First we need to determine what is a strong and weak password, this is the most obvious start. There are several types of implementations, here you can see an example comparing three different passwords in several different services:

I recommend that read the whole explanation here, just where you have this image.

Dropbox made its "password analysis system available in open source", you can see here. It has implementations in several different languages.

If you want a list with more options:

• ZXCVBN
• Complexify
• Passwdqc

If you want a comparison, see here.

---

Measuring password forces is relative, by me extremely flawed. The strength of the password will be measured by a standard, a criterion you believe is safe. Even for this reason there is so much difference the result of a library and another library. The problem is that the attacker may not follow their pattern. It is impossible to determine the strength of a password if the attacker’s technique is unknown.

Even, the password "correcthorsebatterystaple" may not be considered good, according to, for example, the Bruce Schneier, this is the same password that ZXCVBN, from Dropbox, considers safer.

---

I personally believe that the most important thing is to allow the user to use 2FA, preferably FIDO U2F and for now also accept the TOTP. This will be the main factor, if the person discover the password will be blocked by the second authentication.

Remember to store the password correctly (using Argon2, Bcrypt, Scrypt or PBDKF2, with high difficulties), this delay of "offline" attacks if your database has been compromised.

Answer 2

Maybe this can help.

In your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4 text-center">
			<div class="search-box">
				<div class="caption">
					<h3>Advance Password Validation</h3>
					<p>Find to All</p>
				</div>
				<form action="" class="loginForm">
					<div class="input-group">
						<input type="text" id="name" class="form-control" placeholder="Full Name">
						<input type="password" id="paw" class="form-control" placeholder="Password">
						<input type="submit" id="submit" class="form-control" value="Submit">
					</div>
				</form>
			</div>
		</div>
		<div class="col-md-4">
			<div class="aro-pswd_info">
				<div id="pswd_info">
					<h4>Password must be requirements</h4>
					<ul>
						<li id="letter" class="invalid">At least <strong>one letter</strong></li>
						<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
						<li id="number" class="invalid">At least <strong>one number</strong></li>
						<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
						<li id="space" class="invalid">be<strong> use [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

Can style with some css:

.alignleft {
float: left;
margin-right: 15px;
}
.alignright {
float: right;
margin-left: 15px;
}
.aligncenter {
display: block;
margin: 0 auto 15px;
}
a:focus { outline: 0 solid }
img {
max-width: 100%;
height: auto;
}
.fix { overflow: hidden }
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
font-weight: 700;
}
html,
body { height: 100% }

a {
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
color: #333;
}
a:hover { text-decoration: none }



.search-box{margin:80px auto;position:absolute;}
.caption{margin-bottom:50px;}
.loginForm input[type=text], .loginForm input[type=password]{
margin-bottom:10px;
}
.loginForm input[type=submit]{
background:#fb044a;
color:#fff;
font-weight:700;

}


#pswd_info {
background: #dfdfdf none repeat scroll 0 0;
color: #fff;
left: 20px;
position: absolute;
top: 115px;
}
#pswd_info h4{
background: black none repeat scroll 0 0;
display: block;
font-size: 14px;
letter-spacing: 0;
padding: 17px 0;
text-align: center;
text-transform: uppercase;
}
#pswd_info ul {
list-style: outside none none;
}
#pswd_info ul li {
   padding: 10px 45px;
}



.valid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/vq43s2wib/valid.png") no-repeat scroll 2px 6px;
color: green;
line-height: 21px;
padding-left: 22px;
}

.invalid {
background: rgba(0, 0, 0, 0) url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px 6px;
color: red;
line-height: 21px;
padding-left: 22px;
}


#pswd_info::before {
background: #dfdfdf none repeat scroll 0 0;
content: "";
height: 25px;
left: -13px;
margin-top: -12.5px;
position: absolute;
top: 50%;
transform: rotate(45deg);
width: 25px;
}
#pswd_info {
display:none;
}

Already your javascript (where the magic will happen) will be like this:

$(document).ready(function(){
	
	$('input[type=password]').keyup(function() {
		var pswd = $(this).val();
		
		//validate the length
		if ( pswd.length < 8 ) {
			$('#length').removeClass('valid').addClass('invalid');
		} else {
			$('#length').removeClass('invalid').addClass('valid');
		}
		
		//validate letter
		if ( pswd.match(/[A-z]/) ) {
			$('#letter').removeClass('invalid').addClass('valid');
		} else {
			$('#letter').removeClass('valid').addClass('invalid');
		}

		//validate capital letter
		if ( pswd.match(/[A-Z]/) ) {
			$('#capital').removeClass('invalid').addClass('valid');
		} else {
			$('#capital').removeClass('valid').addClass('invalid');
		}

		//validate number
		if ( pswd.match(/\d/) ) {
			$('#number').removeClass('invalid').addClass('valid');
		} else {
			$('#number').removeClass('valid').addClass('invalid');
		}
		
		//validate space
		if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
			$('#space').removeClass('invalid').addClass('valid');
		} else {
			$('#space').removeClass('valid').addClass('invalid');
		}
		
	}).focus(function() {
		$('#pswd_info').show();
	}).blur(function() {
		$('#pswd_info').hide();
	});
	
});

I hope it helps clear your mind.

Reference: https://bootsnipp.com/snippets/featured/advance-password-validation