MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Complexify - a jQuery plugin for Checking password strength

See in this article how to use jQuery plugin Complexify to check the level of complexity / security passwords on web pages.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Introduction

During the development of applications, especially web, one of the factors most relevant and deserves attention is security. In most systems where the user holds personal information, whether photos, music, information, buying and selling, etc., that is needed to authenticate in order to have access to these data.

But, obviously, to be able to authenticate (log) in the system, we need to make that user a register, informing login, password and other data relevant to the application. At the time of registration, it is essential that the system assists the user and perform a scan of the "strength" of your password, avoiding that it uses a string easy to find and consequently make losses due to violation of their data by someone has discovered your password and accessed the system.

This verification can change between applications, but in general using a validation algorithm of the complexity of the password entered. As the development of such an algorithm may be quite complex, a practical and is quite suitable to use solutions already developed and distributed for general use (generally free).

We are talking about the jQuery Complexify Plugin, who performs this validation quickly, and can be easily integrated into web pages. This plugin was developed by Dan Palmer and is of free distribution and can be obtained from the official website that can be accessed at: http://danpalmer.me/jquery-complexify/.

In this article we will see how to integrate this plugin to an HTML page, through practical examples will be shown where the complexity of the password entered at the time of insertion of this data, without having to click any buttons or "exit" the password field, for example.

How to use

As this plugin was developed based on the jQuery library, first of all it is necessary to refer to it in order to make use of your syntax. The jQuery can be obtained on the official website (http://jquery.com/download/), where you can download and use the local file, or you can reference the JS file directly on the server (http://code.jquery.com/jquery-1.9.0.min.js), as we will see in Listing 1.

The same can be done with the plugin itself, which can be obtained from the link https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js to save and use the local file or directly using this address at the time of reference. In this paper we will use the second form.

Listing 1: Referencing the necessary files

<script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>

Then you need to insert another tag in which the complexify function will be invoked to the fields that need to be validated. Once you have imported the jQuery, we can use a syntax for using the plugin. In Listing 2 there is shown a basic example of usage.

Listing 2: Basic syntax validation

<script type="text/javascript">
        $(function () {
            $("#fieldname").complexify({}, function (valid, complexity) {
                //show de password level
            });
        });
</script>

Where we have the field called fieldname, in the jQuery selector, must be informed of the id field to be validated, usually an input of type password.

Practical Example with tag <meter>

In this example we will use the <meter> tag that displays a progress bar, which will control the property value according to the level of complexity/security password entered.

The code in Listing 3 below, can be saved as a html file extension and open the browser to check.

Listing 3: Example of level validation of the password

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Checking password strength with jQuery Complexify plugin - MrBool Tutorial</title>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtPassword").complexify({}, function (valid, complexity) {
                document.getElementById("PassValue").value = complexity;
            });
        });
</script>
</head>
<body>
    <p>
        <span>Password:</span><input type="password" id="txtPassword" />
        <meter value="0" id="PassValue" max="100"></meter>
    </p>
</body>
</html>

By opening the example in the browser we have the following result:

Validation of password level with tag meter

Figure 1: Validation of password level with tag meter

To see this demo working you can access this link

Example using jQuery UI ProgressBar

In this article, trying to show more than one way to present the password security level, we will use the jQuery UI Progressbar widget, which works similarly to the meter, but with very different styles. To do this you must reference more some files, but how to explain the workings of jQuery UI is not the focus of this article and also due to the references are very similar to those already made​​, will not go into details, just see the code and then the result.

Listing 4: Password validation with cross-browser interface

<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Checking password strength with jQuery Complexify plugin - MrBool Tutorial</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="https://raw.github.com/danpalmer/jquery.complexify.js/master/jquery.complexify.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#txtPassword").complexify({}, function (valid, complexity) {
                $("#progressbar" ).progressbar({
                  value: complexity
                });
            });
        });
</script>
</head>
<body>
    <p>
        <span>Password:</span><input type="password" id="txtPassword" />
        <div id="progressbar"></div>
    </p>
</body>
</html>

As a result we have the following interface:

Password validation with the jQuery UI Progressbar widget

Figure 2: Password validation with the jQuery UI Progressbar widget

To see this demo working you can access this link

Conclusion

Questions regarding the layout of the page were not focused in this article, the objective here was to present this jQuery plugin called Complexify, very useful and easy to use.

Considering that password security is an extremely important factor in a register, it's easy to see the utility of this tool. It is important to visit the official page of this plugin for more information about their use.

We finish this article here. Until next publication, see you next time.



Studing Computer Science at UFRN, .NET/C#, delphi developer almost 3 years, having worked with Webservices, WPF, asp.net and Windows Phone 7, also has knowledge in HTML, CSS and Javascript (jQuery).

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login