Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Input / Password Strength Checker


Change password strength settings:


select
select
select
select
select
select
RadTextBox
 
ASP.NET TextBox extended wtih the RadInputManager

Customized indicators



   

Custom calculated strength score

 

  • Properties of the PasswordStrengthSettings:

    • ShowIndicator - enable/disable the indication. By default ShowIndicator is set to "false". In order to show the indication set the proprty to "true"
    • PreferredPasswordLength - Preferred length of the password.
    • MinimumNumericCharacters - Minimum numeric characters that user has to enter in order his password to be considered as stronger
    • MinimumUpperCaseCharacters - Minimum upper case characters
    • MinimumLowerCaseCharacters - Minimum lower case characters
    • MinimumSymbolCharacters - Minimal symbol characters
    • CalculationWeightings - List of 4 semi-colon separated numeric values used to determine the weighting of a strength characteristic. Total of the 4 values should be 100. The default they are defined as 50;15;15;20. This means that password length will determinate the 50% of the strength calculation, Numeric criteria is 15% of strength calculation, casing criteria is 15% of calculation, and symbol criteria is 20% of calculation. So the format is "A;B;C;D" where A = length weighting, B = numeric weighting, C = casing weighting, D = symbol weighting.
    • RequiresUpperAndLowerCaseCharacters - Specifies whether upper and lower case characters are required. By default the property is set to "true". When is false, the MinimumLowerCaseCharacters and MinimumUpperCaseCharacters properties does not effect the calculation of the password.
    • IndicatorElementID - set div or span element to which indication to be applied. If this property is not set, such element will be created automatically
    • IndicatorElementBaseStyle - Name of CSS class that will be used for styling the indicator element.
    • TextStrengthDescriptions - List of five semi-colon separated descriptions that will be used for showing the password strength. By default TextStrengthDescriptions is set to "Very Weak;Weak;Medium;Strong;Very Strong"
    • TextStrengthDescriptionStyles - List of six semi-colon separated CSS classes that will be applied depending on the calculated password strength. By default the property is "riStrengthBarL0;riStrengthBarL1;riStrengthBarL2;riStrengthBarL3;riStrengthBarL4;riStrengthBarL5;"
    • OnClientPasswordStrengthCalculating - client event fired when password calculation is performing.

    When handling the OnClientPasswordStrengthCalculating event, the folowing properties of the event arguments can be used:

    • get_passwordText - get password entered by the user.
    • get_strengthScore - get calculated passwrod strength.
    • set_strengthScore - set custom calculated password strength.
    • set_indicatorText - set text that will be used in the indicator element instead of the corespondading one from TextStrengthDescriptions.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.InputExamplesVB.Common.PasswordStrengthChecker.DefaultVB" %>

    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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">
      <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
      <style type="text/css">
        .Base
        {
          display: inline-block;
          font: 12px/18px "segoe ui" ,arial,sans-serif;
          height: 20px;
          overflow: hidden;
          text-align: center;
          vertical-align: middle;
          width: 121px;
          color: #fff;
          border: 1px solid #333;
        }
        .L0
        {
          border: 0 none;
        }
        .L1
        {
          background-color: #ff3933;
        }
        .L2
        {
          background-color: #ff6633;
        }
        .L3
        {
          background-color: #ff3399;
        }
        .L4
        {
          background-color: #cccc33;
        }
        .L5
        {
          background-color: #33cc00;
        }
        
        .cfgContent .RadComboBox
        {
          margin-bottom: 10px;
          width: 298px;
        }
        
        .cfgContent .RadComboBoxWithLabel .rcbLabel
        {
          width: 170px;
          display: inline-block;
        }
        
        .checkboxes
        {
          line-height: 30px;
        }
        
        .customizedInd .RadInput
        {
          margin-bottom: 5px;
        }
        
        .customizedInd .RadInput .riLabel
        {
          width: 100px;
          display: inline-block;
        }
        
        .customizedInd h2
        {
          font-weight: normal;
          font-size: 14px;
          color: #666;
        }
      </style>
      <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
          function CalculatingStrength(sender, args)
          {
            if (args.get_passwordText() == "Enter Password")
            {
              //Manually set strength Score depending on the input text.
              args.set_indicatorText("Custom text");
              args.set_strengthScore(0);
            }
            else
            {
              var calculatedScore = args.get_strengthScore();
              //Changing the indicator text depending on the calculated score.
              args.set_indicatorText("Score: (" + calculatedScore + "/100)");
            }
          }

          function checkPasswordMatch()
          {
            var text1 = $find("<%=PasswordInput1.ClientID %>").get_textBoxValue();
            var text2 = $find("<%=PasswordInput2.ClientID %>").get_textBoxValue();

            if (text2 == "")
            {
              $get("PasswordRepeatedIndicator").innerHTML = "";
              $get("PasswordRepeatedIndicator").className = "Base L0";
            }
            else if (text1 == text2)
            {
              $get("PasswordRepeatedIndicator").innerHTML = "Match";
              $get("PasswordRepeatedIndicator").className = "Base L5";
            }
            else
            {
              $get("PasswordRepeatedIndicator").innerHTML = "No match";
              $get("PasswordRepeatedIndicator").className = "Base L1";
            }
          }

        </script>
      </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
      <form id="mainForm" method="post" runat="server">
      <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" ShowSkinChooser="true">
      </qsf:Header>
      <asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
      <br />
      <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Title="Change password strength settings:"
        Expanded="true" Style="overflow: hidden;">
        <div style="float: left;">
    <asp:CheckBox ID="CheckBoxPasswordMode" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxPasswordMode_CheckedChanged"
    Text="Show TextBoxes in Password TextMode" Checked="true" CssClass="checkboxes" />
          <br />
    <asp:CheckBox ID="CheckBoxIndication" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBoxIndication_CheckedChanged"
    Text="Enable password strength indication" Checked="true" CssClass="checkboxes" />
          <br />
    <asp:CheckBox ID="CheckBoxUpperAndLower" runat="server" AutoPostBack="true" Text="Requires upper and lower case characters"
    Checked="true" OnCheckedChanged="CheckBoxUpperAndLower_CheckedChanged" CssClass="checkboxes" />
        </div>
        <div style="float: right; width: 600px;">
          <telerik:RadComboBox ID="ComboPreferredPasswordLength" runat="server" AutoPostBack="True"
            Width="75px" Label="Preferred password length" OnSelectedIndexChanged="ComboPreferredPasswordLength_SelectedIndexChanged" />
          <telerik:RadComboBox ID="ComboMinimumNumericCharacters" runat="server" AutoPostBack="True"
            Width="75px" Label="Minimum numeric characters" OnSelectedIndexChanged="ComboMinimumNumericCharacters_SelectedIndexChanged" />
          <telerik:RadComboBox ID="ComboMinimumSymbolCharacters" runat="server" AutoPostBack="True"
            Width="75px" Label="Minimum symbol characters" OnSelectedIndexChanged="ComboMinimumSymbolCharacters_SelectedIndexChanged" />
          <telerik:RadComboBox ID="ComboMinimumUpperCaseCharacters" runat="server" AutoPostBack="True"
            Width="75px" Label="Minimum upper case characters" OnSelectedIndexChanged="ComboMinimumUpperCaseCharacters_SelectedIndexChanged" />
          <telerik:RadComboBox ID="ComboMinimumLowerCaseNumericCharacters" runat="server" AutoPostBack="True"
            Width="75px" Label="Minimum lower case characters" OnSelectedIndexChanged="ComboMinimumLowerCaseCharacters_SelectedIndexChanged" />
          <telerik:RadComboBox ID="ComboCalculationWeightings" runat="server" AutoPostBack="True"
            Width="75px" Label="Calculation Weightings" OnSelectedIndexChanged="ComboCalculationWeightings_SelectedIndexChanged" />
        </div>
      </qsf:ConfiguratorPanel>
    <asp:Panel ID="Panel1" runat="server" Style="border-bottom: 1px dotted #333; padding-bottom: 30px;
    overflow: hidden;">
        <div style="float: left;">
          RadTextBox
          <br />
          <telerik:RadTextBox runat="server" ID="RadTextBox1" TextMode="Password">
            <PasswordStrengthSettings ShowIndicator="true" />
          </telerik:RadTextBox>
        </div>
        <div style="float: left; padding-left: 50px;">
          ASP.NET TextBox extended wtih the RadInputManager
          <br />
          <asp:TextBox runat="server" ID="TextBox1" TextMode="Password"></asp:TextBox>
          <br />
          <telerik:RadInputManager runat="server" ID="RadInputManager1">
            <telerik:TextBoxSetting>
              <TargetControls>
                <telerik:TargetInput ControlID="TextBox1" />
              </TargetControls>
              <PasswordStrengthSettings ShowIndicator="true" />
            </telerik:TextBoxSetting>
          </telerik:RadInputManager>
        </div>
      </asp:Panel>
      <div style="overflow: hidden;" class="customizedInd">
        <div style="float: left;">
          <h2>
            Customized indicators</h2>
          <telerik:RadTextBox ID="PasswordInput1" Width="250px" runat="server" Label="Enter password:"
            TextMode="Password" onkeyup="checkPasswordMatch()">
            <PasswordStrengthSettings ShowIndicator="true" TextStrengthDescriptions="Level1;Level2;Level3;Level4;Level5"
              IndicatorElementBaseStyle="Base" TextStrengthDescriptionStyles="L0;L1;L2;L3;L4;L5"
              IndicatorElementID="CustomIndicator" />
          </telerik:RadTextBox>
          <br />
          <telerik:RadTextBox ID="PasswordInput2" Width="250px" runat="server" Label="Repeat password:"
            TextMode="Password" onkeyup="checkPasswordMatch()">
            <ClientEvents />
          </telerik:RadTextBox>
          <br />
          <span id="CustomIndicator">&nbsp;</span> <span id="PasswordRepeatedIndicator" class="Base L0">
            &nbsp;</span>
        </div>
        <div style="float: left; padding-left: 50px;">
          <h2>
            Custom calculated strength score</h2>
          <telerik:RadTextBox runat="server" ID="RadTextBox2" Text="Enter Password">
            <PasswordStrengthSettings ShowIndicator="true" OnClientPasswordStrengthCalculating="CalculatingStrength" />
          </telerik:RadTextBox>
        </div>
      </div>
      <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"
        UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="Panel1">
            <UpdatedControls>
              <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
          </telerik:AjaxSetting>
          <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
            <UpdatedControls>
              <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />
              <telerik:AjaxUpdatedControl ControlID="Panel1" />
            </UpdatedControls>
          </telerik:AjaxSetting>
        </AjaxSettings>
      </telerik:RadAjaxManager>
      <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"
        MinDisplayTime="200">
      </telerik:RadAjaxLoadingPanel>
      <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
      </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451