::
::
::
::
::
<html>
<head>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>![](https://www.cnblogs.com/Images/dot.gif)
body
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*ie needs this*/
margin:0px;
padding:0px;
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//*set global font settings*/
font-size:10px;
font-family:Tahoma,Verdana,Arial;
}
a:hover
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
color:#fff;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#user_registration
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
border:1px solid #cccccc;
margin:auto auto;
margin-top:100px;
width:400px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#user_registration label
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
display: block; /**//* block float the labels to left column, set a width */
float: left;
width: 70px;
margin: 0px 10px 0px 5px;
text-align: right;
line-height:1em;
font-weight:bold;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#user_registration input
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
width:250px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#user_registration p
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
clear:both;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#submit
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
border:1px solid #cccccc;
width:100px !important;
margin:10px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
h1
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
text-align:center;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
#passwordStrength
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
height:10px;
display:block;
float:left;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength0
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
width:250px;
background:#cccccc;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength1
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
width:50px;
background:#ff0000;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
width:100px;
background:#ff5f5f;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength3
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
width:150px;
background:#56e500;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
background:#4dcd00;
width:200px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
.strength5
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
}{
background:#399800;
width:250px;
}
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
</style>
</style>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script>![](https://www.cnblogs.com/Images/dot.gif)
function passwordStrength(password)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
var score = 0;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<form method="post" action="" id="user_registration" name="user_registration">
<p><h1>Password strength metter</h1></p>
<p>
<label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
</p>
<p>
<label for="pass2">Confirm Password</label><input type="password" name="pass2" id="pass2"/>
</p>
<p>
<label for="passwordStrength">Password strength</label>
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0"></div>
</p>
<p>
<input type="submit" name="submit" id="submit" value="Register">
</p>
</form>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</body>
</html>
posted on
2008-05-23 15:42
craig
阅读(
306)
评论()
编辑
收藏
举报