check Password Strength using Jquery in asp.net:
Password strength checking is an easy way to show the strength of user password on the registration forms. It helps users to choose more secure password when filling the forms.

The idea is that every time a user enters a character, the contents is evaluated to test the strength of the password they have entered... I'm sure everyone has seen these before.


That’s all. Here’s the full jQuery code:


<link href="FormValidation.css" rel="stylesheet" type="text/css" />
    <link href="jquery.validate.password.css" rel="stylesheet" type="text/css" />
    <script src="JS/jquery.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.js" type="text/javascript"></script>
    <script src="JS/jquery.validate.password.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
    
    
     $(document).ready(function() {
         // validate signup form on keyup and submit
         var validator = $("#divCreateNewUser").validate({
             rules: {
                 username: {
                     required: true,
                     minlength: 2
                 },
                 txtPassword: {
                     password: "#username"
                 },
                 password_confirm: {
                     required: true,
                     equalTo: "#password"
                 },
                 location: {
                     required: true
                 }
             },
             messages: {
                 username: {
                     required: "Enter a username",
                     minlength: jQuery.format("Enter at least {0} characters")
                 },
                 password_confirm: {
                     required: "Repeat your password",
                     minlength: jQuery.format("Enter at least {0} characters"),
                     equalTo: "Enter the same password as above"
                 },
                 location: {
                     required: "Enter a Location"
                 }
             },
             // the errorPlacement has to take the table layout into account
             errorPlacement: function(error, element) {
                 error.prependTo(element.parent().next());
             },
             // set this class to error-labels to indicate valid fields
             success: function(label) {
                 // set &nbsp; as text for IE
                 label.html("&nbsp;").addClass("checked");
             }
         });
     });
</script>




<body>
    <form id="signupform1" runat="server">
    <div id="signupwrap" runat="server">
    <table align="center">
    <tr>
    <td></td>
    <td><b>User Registration</b></td>
    <td></td>
    </tr>
    <tr>
    <td align="right" class="label">UserName:</td>
    <td  class="field"><asp:TextBox ID="username" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td  align="right" class="label">Password:</td>
    <td  class="field"><asp:TextBox ID="txtPassword" runat="server" TextMode="Password"/></td>
     <td class="status" align="left">
     <div class="password-meter">
        <div class="password-meter-message">&nbsp;</div>
        <div class="password-meter-bg">
         <div class="password-meter-bar"></div>
        </div>
       </div>
     </td>
    </tr>
    <tr><td align="right" class="label">Confirm Password:</td>
    <td  class="field"><asp:TextBox ID="password_confirm" runat="server" TextMode="Password"/></td>
     <td class="status"></td>
    </tr>
   <tr>
    <td align="right" class="label">Location:</td>
    <td  class="field"><asp:TextBox ID="location" runat="server"/></td>
     <td class="status"></td>
    </tr>
    <tr>
    <td></td>
    <td><asp:Button ID="btnSubmit" Text="Submit" runat="server" 
            onclick="btnSubmit_Click" /></td>
     <td></td>
    </tr>
    <tr>
    <td colspan="3" height="20px">
    </td>
    </tr>
    <tr>
    <td></td>
    <td colspan="2">
    
        <table>
   <tr>
   <td>UserName:</td>
   <td><asp:Label ID="lbluser" runat="server"/></td>
   </tr>
   <tr>
   <td>Password:</td>
   <td><asp:Label ID="lblPwd" runat="server"/></td>
   </tr>
    <tr>
   <td>Location:</td>
   <td><asp:Label ID="lblLocation" runat="server"/></td>
   </tr>
    </table>
    </td>
    
    </tr>
    </table>
    </div>
    </form>
</body>
 
download: click here to download the source code for jquery password strength indicator.

Out-put of the above code 


1 comments

  1. Anonymous // November 1, 2012 at 3:12 PM  

    strongly typed vs weakly typed

    Strong typing and weak typing are terms used in computer science and computer programming to describe

    the manner in which restrictions on how operations involving values of different data types can be

    intermixed.

    Strong typing:
    In a strongly typed language, variables have a type, and they will always be that type. You can not assign

    a value of one type, to a variable of another type.

    Strong type is checking the types of variables at compile time.

    Languages like Java, C# and Python are strongly typed - there is no way you can add a number to a string

    without doing an explicit conversion.

    Weak typing:
    In a weakly typed language, variables don't have a type. You can assign anything to them.
    Weak typing is checking the types of the system at run-time.

    Languages like Perl and PHP are weakly typed because you can do things like adding numbers to strings and

    the language will do an implicit coercion for you.

    http://en.wikipedia.org/wiki/Strong_typing

Related Posts Plugin for WordPress, Blogger...