jQuery Password Strength Meter

Include js and css
        <script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'></script>
        <!-- custom select plugin js -->
        <script type="text/javascript" src='http://jquerycustomselectbox.googlecode.com/svn/trunk/WebRoot/password_strength/password_strength_plugin.js'></script>
        <link href="css_new/style1.css" rel="stylesheet" type="text/css" />
        <link href="css_new/generalstyle.css" rel="stylesheet" type="text/css" />


    <script>
            $(document).ready(function () {

                //BASIC
                $(".password_test").passStrength({
                    userid: "#user_id"
                });

                //ADVANCED
                $(".password_adv").passStrength({
                    shortPass: "top_shortPass",
                    badPass: "top_badPass",
                    goodPass: "top_goodPass",
                    strongPass: "top_strongPass",
                    baseStyle: "top_testresult",
                    userid: "#user_id_adv",
                    messageloc: 0
                });
            });
        </script>



Put in body part

<table cellpadding="2" cellspacing="0" border="0">
            <tr>
                <td align="right">
                    <label>
                        User Name:</label>
                </td>
                <td>
                    <input type="text" name="user_name" id="user_id_adv" />
                </td>
            </tr>
            <tr>
                <td align="right">
                  <label>
                        Password:</label>
                </td>
                <td>
                    <input type="password" name="pass_word" id="CSPassWord" class="password_adv" />
                </td>
            </tr>
        </table>


style1.css

body{
    background-color: #efefef;
}
a,a:LINK,a:VISITED{color:#27558e;}
#page_wrapper{
    border:2px dashed #999;
    margin: auto;
    padding:10px 30px 60px 30px ;
    position:relative;
    background:#fff;
    width:920px;
}
.code{
    clear:both;
}
label.lbl_header{
    font-weight: bold;
    clear:both;
    display:block;
    margin-top:25px;
    border:1px solid #999;
    padding:2px;
    background:#efefef;
}
h2 div{
    font-size:12px;
    font-family: arial,helvetica,san-serif;
    color:#999;
}
.html{
    color:#333;
}
.myClassName{
background:yellow;
}

generalstyle.css
td label{
    font-size:14px;
    font-weight:bold;
    color:#666;
    font-family: arail,helvetica,san-serif;
}
#CSPassWord{
    height:28px;
    width:200px;
    border:1px solid #ccc;
    font-size:16px;
    font-weight: bold;
    color:#666;
    padding:7px 0 0 4px;
}

/*  ADVANCED STYLES */
.top_testresult{
    font-weight: bold;
    font-size:13px;
    font-family: arail,helvetica,san-serif;
    color:#666;
    padding:0;
    margin:0 0 2px 0;
}
.top_testresult span{
    padding:6px ;
    margin:0;
}
.top_shortPass{
    background:#edabab;
    border:1px solid #bc0000;
    display:block;
}
.top_shortPass span{
   
}
.top_badPass{
    background:#edabab;
    border:1px solid #bc0000;
    display:block;
}
.top_badPass span{
   
}
.top_goodPass{
    background:#ede3ab;
    border:1px solid #bc9f00;
    display:block;
}
.top_goodPass span{

}
.top_strongPass{
    background:#d3edab;
    border:1px solid #73bc00;
    display:block;
}
.top_strongPass span{

}


/*     RESULT STYLE  */
.testresult{
    font-weight: bold;
    font-size:13px;
    font-family: arial,helvetica,san-serif;
    color:#666;
    padding:0px 0px 12px 10px;
    margin-left:10px;
    display: block;
    height:28px;
    float:left;
}
.testresult span{
    padding:10px 20px 12px 10px;
    margin: 0px 0px 0px 20px;
    display:block;
    float:right;
    white-space: nowrap;
}
.shortPass{
    background:url(images/red.png) no-repeat 0 0;
}
.shortPass span{
    background:url(images/red.png) no-repeat top right;
}
.badPass{
    background:url(images/red.png) no-repeat 0 0;
}
.badPass span{
    background:url(images/red.png) no-repeat top right;
}
.goodPass{
    background:url(images/yellow.png) no-repeat 0 0;
}
.goodPass span{
    background:url(images/yellow.png) no-repeat top right;
}
.strongPass{
    background:url(images/green.png) no-repeat 0 0;
}
.strongPass span{
    background:url(images/green.png) no-repeat top right;
}

======================================================================

another link
http://jquerybyexample.blogspot.com/2012/07/jquery-plugin-to-show-password-strength.html