ASP.NET - Password Strength Indicator using jQuery and XML
page 4 of 8
by Bryian Tan
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 47160/ 112

Using the Code

Include a Textbox control, jQuery library and the plug-in into the web page. Change the txtPassword id to your desire id. Use this line of code "var myPlugin = $("[id$='txtPassword']").password_strength();" to call the plug-in. To check if the password met the password policy, call the metReq() function with this line of code " myPlugin.metReq()". Please refer to Listing 1 for full details. The jQuery $("[id$='txtPassword']") selector will work with ASP.NET server control, so don't bother using my 'txtPassword.ClientID'. The bar color, width and password policy information can be modify through the XML file.

Listing 2

<div style="height:400px">
<br />
<asp:label runat="server" id="lblPassword" 
    AssociatedControlId="txtPassword">Enter Password:</asp:label> 
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
<br />
<a id="passwordPolicy" href="#">Password policy</a> <br /><br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
 
<br /><br />
 
    <asp:Label ID="ResultLabel" runat="server" Text=""></asp:Label>
</div>
 
<script src="Script/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Script/jquery.password-strength.js" type="text/javascript"></script>
 
<script type="text/javascript">
    $(document).ready(function() {
        var myPlugin = $("[id$='txtPassword']").password_strength();
 
        $("[id$='btnSubmit']").click(function() {
            return myPlugin.metReq(); //return true or false
        });
 
        $("[id$='passwordPolicy']").click(function(event) {
            var width = 350, height = 300, left = (screen.width / 2) - (width / 2),
            top = (screen.height / 2) - (height / 2);
            window.open("PasswordPolicy.xml", 'Password_poplicy', 'width=' + width + 
            ',height=' + height + ',left=' + left + ',top=' + top);
            event.preventDefault();
            return false;
        });
    });
</script>

We can use the XLST to display the contents of the PasswordPolicy.xml or write code to extract its contents. I preferred to use XLST to avoid writing additional code. Displayed below is the password policy page. If you want to learn more on how to displaying XML with XSLT click on here.

Figure 4

 


View Entire Article

User Comments

Title: sdfsdf   
Name: sdfd
Date: 2012-08-31 10:21:04 AM
Comment:
sdfsfs
Title: sgwg   
Name: asdf
Date: 2012-08-30 11:06:21 PM
Comment:
asfsadffsadfasdfasf
Title: asdf   
Name: asdf
Date: 2012-08-30 11:05:30 PM
Comment:
asdfsf
Title: jashova   
Name: Esa
Date: 2011-02-14 6:27:36 AM
Comment:
Good post
Title: Download and demo links   
Name: Bryian Tan
Date: 2011-02-01 7:37:32 PM
Comment:
Hello,

I forgot to include the correct link to the download and demo in the original post. Here is the link.

Watch this script in action
http://download.ysatech.com/ASP-NET-jQuery-Password-Strength
Download Sample
http://download.ysatech.com/ASP-NET-jQuery-Password-Strength/Password_Strength_Indicator.zip






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-10-27 3:05:12 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search