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
