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;
}
head部分代码
head
<title>无标题页</title>
<script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
<!– custom select plugin js –>
<script type=”text/javascript” src=”js/password_strength_plugin.js”></script>
<link rel=”stylesheet” type=”text/css” href=”css/style.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>
body部分代码
body
<body>
<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” class=”password_adv”/></td>
</tr>
</table>
</body>
