NiceSnippets.com
Password Strength Checker Jquery Bootstrap Example with Demo
In this snippet, i will share code of password strength meter jquery plugin and we will create example and demo of jquery password strength bar. You can simply do password strength indicator in javascript.
We will take two input box and make validation for it. it will automatically check on key change event and you can see password strength bar with what is validation are still left like uppercase, lowercase, special character etc. So basically, you can easily check demo and download code for password strength jquery bootstrap.
<!doctype html>
<html lang="en">
<head>
<title>Password Strength Checker | Bootstrap 4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="//nicesnippets.com/demo/password-validator.js"></script>
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style type="text/css">
body{
margin-top: 150px;
font-family: 'Ropa Sans', sans-serif;
}
label{
font-size: 20px;
}
.popover-header{
background: #e1e1e1 !important;
}
</style>
</head>
<body class="bg-info">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="text-dark">Password Strength Checker Plugin</h2>
</div>
<div class="col-md-4 offset-md-4">
<form>
<div class="form-group">
<label class="text-white">Password</label>
<input class="validate form-control" type="password" placeholder="Password" id="password1">
</div>
<div class="form-group">
<label class="text-white">Retype Password</label>
<input class="verify form-control" type="password" placeholder="Retype Password" id="verify1">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
