Ajax password strength example for checking the password strength in AJAX with Asp.Net | Password Strength indicator in Ajax

Here I will explain how to use Ajax password strength control to display the password strength during registration of user using asp.net.

Description: 

in this Example we Explain that how to use Ajax Password Strength control to check the password strength during user is fillup the Registration forn in Asp.Net.

In this Example we Create one registration page that allows users to register in website at that time I need to check the password length, number of minimum characters required and number of minimum numbers and special characters required and so more and at the same time I need to check the password strength like poor, average, good etc. To display that’s type of  requirement we used Ajax Password strength control to display password strength. 

Here we can display password strength in two styles 

      1) Text

     2) BarIndicator

Now I can explain how to show the basic password strength using Text indicatortype with Ajax passwordStrength control.

First add AjaxControlToolkit reference to your application and design your aspx page like this

There are some importtant Property of the Ajax Password Strength Control are as follows:

TargetControlID – we need to give ID of the textbox for which we need to check password strength. 

DisplayPosition – This property are used to adjust the Positioning of the strength indicator relative to the target control like TextBox.

StrengthIndicatorType – This property is used to select Strength indicator type (Text or BarIndicator)

PrefixText - This property is used display prefix text to check password range text (ex: Strength: Average) when StrengthIndicatorType=Text

TextCssClass – This property is used to apply CSS class or formatting to the text display when StrengthIndicatorType=Text

PreferredPasswordLength - This property is used to select preferred length of the password like 6 to 8 character.

MinimumNumericCharacters –This property is used to specify number of minimum numeric characters required.

MinimumSymbolCharacters - This property is used to specify number of minimum symbol characters (ex: $ ^ *) required.

RequiresUpperAndLowerCaseCharacters - This property is used to specify whether mixed case characters are required

MinimumLowerCaseCharacters - This property’s effects apply only when RequiresUpperAndLowerCaseCharacters property is true.and that are used to Specifies the minimum number of lowercase characters required when requiring mixed case characters as part of your password strength considerations.

MinimumUpperCaseCharacters - This property’s effects apply only when RequiresUpperAndLowerCaseCharacters property is true.and that are used to Specifies the minimum number of uppercase characters required when requiring mixed case characters as part of your password strength considerations.

TextStrengthDescriptions - This property is used to specify List of semi-colon separated descriptions used (poor; Weak; Average; Good) when StrengthIndicatorType=Text (Minimum of 2, maximum of 10; order is weakest to strongest)

CalculationWeightings - This property is used to define List of semi-colon separated numeric values used to determine the weighting of a strength characteristic. It must be total of 100. The default weighting values are defined just like this as 50;15;15;20.

BarBorderCssClass - This CSS class applied to the bar indicator's border when StrengthIndicatorType=BarIndicator

BarIndicatorCssClass - CSS class applied to the bar indicator's inner bar when StrengthIndicatorType=BarIndicator

HelpStatusLabelID – This Property is used to assign label ID to display help text

HelpHandleCssClass – This Property is used to assign CSSClass for help text.

HelpHandlePosition - This Property is used to define Positioning of the help handle element relative to the target control.

To show Example of Popup in Ajax click Here Modal Popup in Ajax with Asp.Net

to Show example of Nested Popup Click Here Nested Modal Popup in Ajax with Asp.Net

to show Example of AutoComplete TextBox Extender click Here AutoComplete Extender in Ajax with Asp.Net

to show Example of Password Strength Extender click Here Password Strength in Ajax with Asp.Net

Example:-

<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Password Strength Example</title>

<style type="text/css">

.VeryPoorStrength

{

background: Red;

color:White;

font-weight:bold;

}

.WeakStrength

{

background: Gray;

color:White;

font-weight:bold;

}

.AverageStrength

{

background: orange;

color:black;

font-weight:bold;

}

.GoodStrength

{

background: blue;

color:White;

font-weight:bold;

}

.ExcellentStrength

{

background: Green;

color:White;

font-weight:bold;

}

.BarBorder

{

border-style: solid;

border-width: 1px;

width: 180px;

padding:2px;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManger1" runat="server"></asp:ScriptManager>

<div>

<table>

<tr>

<td>

Enter Password:

</td>

<td>

<asp:TextBox runat="server" ID="txtPassword" TextMode="Password"/>

</td>

</tr>

<tr>

<td></td>

<td>

<asp:Label ID="lblhelp" runat="server"/>

</td>

</tr>

<tr>

<td>

Enter Password:

</td>

<td>

<asp:TextBox runat="server" ID="txtpwd1" TextMode="Password"/>

</td>

</tr>

<tr>

<td></td>

<td>

<asp:Label ID="lblhelp1" runat="server"/>

</td>

</tr>

</table> 

<ajax:PasswordStrength ID="pwdStrength" TargetControlID="txtPassword" StrengthIndicatorType="Text" PrefixText="Strength:" HelpStatusLabelID="lblhelp" PreferredPasswordLength="8"

MinimumNumericCharacters="1" MinimumSymbolCharacters="1" TextStrengthDescriptions="Very Poor;Weak;Average;Good;Excellent" TextStrengthDescriptionStyles="VeryPoorStrength;WeakStrength;

AverageStrength;GoodStrength;ExcellentStrength" runat="server" />

<ajax:PasswordStrength ID="PasswordStrength1" TargetControlID="txtpwd1" StrengthIndicatorType="BarIndicator" PrefixText="Strength:" HelpStatusLabelID="lblhelp1" PreferredPasswordLength="8"

MinimumNumericCharacters="1" MinimumSymbolCharacters="1" BarBorderCssClass="BarBorder" TextStrengthDescriptionStyles="VeryPoorStrength;WeakStrength;

AverageStrength;GoodStrength;ExcellentStrength" runat="server" />

</div>

</form>

</body>

</html>