Checking Password Strength using AJAX
In this article we are going to see how to check Password Strength using AJAX. We are going to use the AJAX component to create the Password Strength class to validate the user input for password strength.
Step 1:
Create a new ASP.NET website: MyAjaxWebsite.
Step 2:
In this Website. In the Scripts folder add a JScript file named "PasswordStrengthChecker.js"
Step 3:
In this JavaScript file, add code to reference the MicrosoftAjax.js library and register our site namespace as shown below:
/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("MyAjaxWebsite");
Step 4:
Write the constructor for our JavaScript class as a function as shown below:
//create constructor
MyAjaxWebsite.PasswordStrengthChecker= function() {
MyAjaxWebsite.PasswordStrengthChecker.initializeBase(this);
}
Here we need to call the base class constructor using initializeBase when defining our class constructor.
Step 5:
The body of the class is created using prototype. In the prototype, we will declare a function called getPasswordStrength. this function takes a password as a parameter, checks the password strength and returns it as shown below:
//define class
MyAjaxWebsite.PasswordStrengthChecker.prototype = {
initialize: function () {
MyAjaxWebsite.PasswordStrengthChecker.callBaseMethod(this, 'initialize');
},
getPasswordStrength: function (password) {
var val= new String(password.toString());
if (val.length < 6) {
return "Weak";
}
else {
if (val.length < 8) {
return "Medium";
}
else {
return "Strong";
}
}
},
dispose: function () {
MyAjaxWebsite.PasswordStrengthChecker.callBaseMethod(this, 'dispose');
}
}
In the above code, we need to call the "callBaseMethod" method whenever we write a method to call the base method.
Step 6:
Now we will register the class with the Microsoft AJAX Library by calling the registerClass method of the component. Here we need to indicate that the javascript class inherits the Sys.Component class from the library. We can also include notification to the application that the script has been fully loaded as shown below:
//register class as a Sys.Component
MyAjaxWebsite.PasswordStrengthChecker.registerClass(
'MyAjaxWebsite.PasswordStrengthChecker', Sys.Component);
//notify script loaded
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Step 7:
Now we will use this component on our .aspx webpage. Open the Default.aspx page in Source view and remove the markup inside the BodyContent tags.
Add a ScriptManager control to the page and inside the ScriptManager
control, add a reference to the PasswordStrengthChecker.js file created previously as shown below:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<scripts>
<asp:ScriptReference Path="Scripts/PasswordStrengthChecker.js" />
</Scripts>
</asp:ScriptManager>
</asp:Content>
Step 8:
Next,Add a text box control for entering a password. We need to add an attribute "onkeyup" which will call the "_OnKeypress()" method when user enters some value in the textbox.
Password:
<br />
<asp:TextBox ID="txtPassword" runat="server"
TextMode="Password" Width="200" onkeyup="_OnKeypress()" ></asp:TextBox>
<asp:Label ID="lblStrength" runat="server" Text=""></asp:Label>
<br />
<input id="btnSubmit" type="button" value="submitBtn" />
Step 9:
Now,add JavaScript to the page to work with client component. We will create an event that fires when the user enters some value in the password textbox. The Label(lblStrength) indicates the strength of the password entered by the user as shown:
The following code is placed inside the HeaderContent tags on the page.
<
function _OnKeypress() {
var chk= new MyAjaxWebsite.PasswordStrengthChecker();
var pass = document.getElementById("MainContent_txtPassword").value;
var strength = chk.getPasswordStrength(pass);
document.getElementById(
"MainContent_lblStrength").innerText = strength;
}
</script>
</asp:Content>
Step 10:
Press Ctrl+F5 and run the application. Enter different value in the password textbox and check the password strength displayed next to the textbox.
Follow
Hey,
This is so helpful article thanks for sharing with us,
Thanks again
Ketan Italiya