How to check password strength in php

index.php

								
									<!DOCTYPE HTML>
									<html lang="en">
									<head>
										<meta charset="utf-8">
										<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
										<title>Password Strength checker</title>
										<!--Bootstrap -->
										<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
										<link rel="stylesheet" href="css/style.css" type="text/css">
										
									</head>
									<body>
										<div class="container">
											<div> </div>
											<P>Check Password Strength</P>
											<div class="card col-md-8">
												<div class="col-md-8">
													<div class="form-group">
														<label>Password</label>
														<input type="password" placeholder="Enter Password" name="password" id="password" class="form-control" onKeyUp="checkPasswordStrength();">
													</div>
													<div id="password-strength-status"></div>
													<div> </div>  
												</div>
											</div>
										</div>
										<!-- Loading Scripts -->
										<script src="js/jquery.min.js"></script>
										<script src="js/main.js"></script>
									</body>
									</html>

main.js

								
									function checkPasswordStrength() {
										var number = /([0-9])/;
										var alphabets = /([a-zA-Z])/;
										var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<])/;

										if($('#password').val().length<6) {
											$('#password-strength-status').removeClass();
											$('#password-strength-status').addClass('weak');
											$('#password-strength-status').html("Weak (should be atleast 6 characters.)");
										} else {  	
											if($('#password').val().match(number) && $('#password').val().match(alphabets) && $('#password').val().match(special_characters)) {            
												$('#password-strength-status').removeClass();
												$('#password-strength-status').addClass('strong');
												$('#password-strength-status').html("Strong Password");
											} else {
												$('#password-strength-status').removeClass();
												$('#password-strength-status').addClass('medium');
												$('#password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
											} 
										}
									}

style.css

								
									#frmCheckPassword 
									{
										border-top:#F0F0F0 2px solid;
										background:#FAF8F8;
										padding:10px;
									}
									#password-strength-status 
									{
										padding: 5px 10px;
										color: #FFFFFF; 
										border-radius:4px;
										margin-top:5px;
									}
									.medium
									{
										background-color: #E4DB11;
										border:#BBB418 1px solid;}
									.weak{background-color: #FF6600;
										border:#AA4502 1px solid;
									}
									.strong
									{
										background-color: #12CC1A;
										border:#0FA015 1px solid;
									}

Download

Comments