Post
Ask Question

Password Strength Control of AJAX using Bar Indicator and Text

So, Code for Password Strength Indicator looks like this:
 

<Ajax:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator" TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true" RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1" MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1" MinimumNumericCharacters="1" PreferredPasswordLength="10" TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent" StrengthStyles="VeryPoor; Weak; Average; Excellent; Strong;" CalculationWeightings="25;25;15;35" BarBorderCssClass="border" HelpStatusLabelID="Label1">

</Ajax:PasswordStrength>

  
And Complete Source Code looks like this:
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Password_Strength.WebForm1" %>

 <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="Ajax" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head id="Head1" runat="server">
      <title></title>
      <style type="text/css">
      .VeryPoor
       {
         background-color:red;
         }

          .Weak
        {
         background-color:orange;
         }

          .Average
         {
          background-color: #A52A2A
         }
          .Excellent
         {
         background-color:yellow;
         }
          .Strong
         {
         background-color:green;
         }
          .border
         {
          border: medium solid #800000;
          width:500px;                
         }
      </style>
 </head>
 <body>
      <form id="form1" runat="server">
      <div>
         <Ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
         </Ajax:ToolkitScriptManager>
      <center>
       Please Enter Password: <asp:TextBox ID="TextBox1" runat="server
TextMode="Password"></asp:TextBox>
      </center><br />

       <Ajax:PasswordStrength ID="PasswordStrength1" runat="server" DisplayPosition="RightSide" StrengthIndicatorType="BarIndicator"
 TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true
RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1"
 MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1
MinimumNumericCharacters="1" PreferredPasswordLength="10"
 TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent"
StrengthStyles="VeryPoor; Weak; Average; Excellent; Strong;"
 CalculationWeightings="25;25;15;35" BarBorderCssClass="border
HelpStatusLabelID="Label1">

         </Ajax:PasswordStrength>
      </div>
      <br />
      <br /><br />
      <br />
      <div>
      <Ajax:PasswordStrength ID="PasswordStrength2" runat="server
DisplayPosition="BelowLeft" StrengthIndicatorType="Text"
 TargetControlID="TextBox1" PrefixText="Stength:" Enabled="true
RequiresUpperAndLowerCaseCharacters="true" MinimumLowerCaseCharacters="1"
 MinimumUpperCaseCharacters="1" MinimumSymbolCharacters="1
MinimumNumericCharacters="1" PreferredPasswordLength="10"
 TextStrengthDescriptions="VeryPoor; Weak; Average; Strong; Excellent"
BarBorderCssClass="border">
         </Ajax:PasswordStrength>
      </div>
      <div><br /><br />
      <center>
      <asp:Label ID="Label1" runat="server" Font-Bold="true" Font-Size="Medium
ForeColor="Brown"></asp:Label>
      </center>
      </div>
      
      </form>
 </body>
 </html>

  
Output of this program:
 
For Weak Password:

weak password.png
 
For Strong Password:

Strong Pasword.jpg
Next Recommended Reading BalloonPopupExtender using Ajax Controls

MVC Corporation
MVC Corporation is consulting and IT services based company.