当前位置：网站综合首页 >> 网页JS特效 >> 鼠标事件类 >> js密码强度提示代码

js密码强度提示代码

来源：中国设计秀作者：w3c 点击：139 加入收藏发表评论

顶一下

关键字：密码提示代码网站优化码强度提示代码

代码如下,点击运行可查看效果.

<html>
<head>
<style>
body
{
 /*ie needs this*/
 margin:0px;
 padding:0px;
 /*set global font settings*/
 font-size:10px;
 font-family:Tahoma,Verdana,Arial;
}
a:hover
{
 color:#fff;
}
#user_registration
{
 border:1px solid #cccccc;
 margin:auto auto;
 margin-top:100px;
 width:400px;
}

#user_registration label
{
        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;
}
#user_registration input
{
 width:250px;
}
#user_registration p
{
 clear:both;
}
#submit
{
 border:1px solid #cccccc;
 width:100px !important;
 margin:10px;
}
h1
{
 text-align:center;
}
#passwordStrength
{
 height:10px;
 display:block;
 float:left;
}
.strength0
{
 width:250px;
 background:#cccccc;
}
.strength1
{
 width:50px;
 background:#ff0000;
}
.strength2
{
 width:100px; 
 background:#ff5f5f;
}
.strength3
{
 width:150px;
 background:#56e500;
}
.strength4
{
 background:#4dcd00;
 width:200px;
}
.strength5
{
 background:#399800;
 width:250px;
}

</style>
</style>
<script>
function passwordStrength(password)
{
 var desc = new Array();
 desc[0] = "Very Weak";
 desc[1] = "Weak";
 desc[2] = "Better";
 desc[3] = "Medium";
 desc[4] = "Strong";
 desc[5] = "Strongest";
 var score   = 0;
 //if password bigger than 6 give 1 point
 if (password.length > 6) score++;
 //if password has both lower and uppercase characters give 1 point 
 if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
 //if password has at least one number give 1 point
 if (password.match(/\d+/)) score++;
 //if password has at least one special caracther give 1 point
 if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
 //if password bigger than 12 give another 1 point
 if (password.length > 12) score++;
  document.getElementById("passwordDescription").innerHTML = desc[score];
  document.getElementById("passwordStrength").className = "strength" + score;
}
</script>
</head>
<body>
<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> 
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2008-06-22 00:13:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/site/html/article_2344.html

热点文章/相关文章