Advertisements
Home > ASP.Net, DotNet, HTML, Javascript, JQuery > How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net

How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net


 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

How to show Password Strength image to user in ASP.Net

Register/change password pages on most of the application showing password strength information to user while entering password in the textbox. It allows to user to enter a strong password for register the pages. We can implement Password Strength Checker in different methods in ASP.Net application. Its better to do it in the client side itself so that user doesn’t feels post back in the page.

Implement Password Strength Checker using Jquery

Here we are going to demonstrate a sample application to implement Password Strength Checker using Jquery. The application shows the status of entered password by each alphabet changes in the textbox such as Week, Good, Strong etc..

Password_Strength_Checker

ASPX/HTML Page for Password Strength Checker  

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery Validation Plugin Password Extension demo</title>
 <link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
 <script type="text/javascript" src="../lib/jquery.js"></script>
 <script type="text/javascript" src="../lib/jquery.validate.js"></script>
 <script type="text/javascript" src="../jquery.validate.password.js"></script>
 <script id="demo" type="text/javascript">
 $(document).ready(function () {
 $("#register").validate();
 $("#password").valid();
});
</script>
 <style>
 label, input
 {
 float: left;
 }
 input
 {
 margin-left: 1em;
 }
 label.error
 {
 display: none !important;
 }
 .password-meter
 {
 float: left;
 }
 </style>
</head>
<body>
 <form id="register">
 <div>
 Password Strength Checker Demo Using JQuery.. 
powered by <a href="http://tuvian.con">
 tuvian</a>
 </div>
 <br />
 <br />
 <label for="password">
 Password:</label>
 <input class="password" name="password" id="password" />
 <div class="password-meter">
 <div class="password-meter-message">
 &nbsp;</div>
 <div class="password-meter-bg">
 <div class="password-meter-bar">
 </div>
 </div>
 </div>
 </form>
</body>
</html>

 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

 

Advertisements
  1. October 11, 2012 at 1:43 am
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: