js实现密码强度验证(显示强度,仿CSDN注册页面的密码验证)
2013-08-06 15:05
645 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
/** css属性控制 */
label {
display: block;
float: left;
width: 70px;
margin: 0px 10px 0px 5px;
text-align: right;
line-height:1em;
font-weight:bold;
font-size:13px;
}
/** 文本框css样式 */
input {
width:200px;
height:25px;
border:1px solid #CCCCCC;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength00 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength01 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength02 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont00 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont01 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont02 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(不包含字体) */
.strength {
width:50px;
background:#EFEFEF;
margin-left:1px;
margin-top:2px;
margin-bottom:0px;
}
/** 密码状态css样式(仅字体部分) */
.strengthFont {
text-align:center;
width:50px;
background:#FFFFFF;
margin-left:1px;
margin-top:0px;
margin-bottom:2px;
}
/** 表格式样 */
#registerTal {
margin-top:20%;
}
/** 列式样 */
.td1{
width:10%;
}
/** 列式样 */
.td2{
width:25%;
}
/** 列式样 */
.td3{
width:20%;
}
/** 错误信息，密码强度式样(隐藏) */
.pwdStrengthHide {
display:none;
margin-left:4px;
}
/** 错误信息，密码强度式样(显示) */
.pwdStrengthShow {
display:block;
margin-left:4px;
}
/** 错误信息(区域) */
#showErrorMsg {
position: absolute;
width:80px;
height:20px;
margin-left:30px;
margin-top:-18px;
border:1px solid #FF0000;
background-color:#FDECB3;
}
/** 错误信息(字体) */
#msgContext {
margin-left:5px;
margin-top:1px;
font-size:13px;
}
</style>
<script>
function passwordStrength(password) {
var desc = new Array();
desc[1] = "弱";
desc[2] = "中";
desc[3] = "强";
var score = 0;
// 含有数字
if (password.match(/\d+/)) {
score ++;
}
// 大小写字母
if (password.match(/[a-z]/) || password.match(/[A-Z]/)) {
score ++;
}
// 特殊字符
if ( password.match(/.[!, @, #, $, %, ^, &, *, ?, _, +, ~, -, (,)]/) ) {
score ++;
}
// 将密码强度状态显示并且输入了内容时候
if (password.length > 0) {
// 密码状态显示
document.getElementById("passwordStrengthHide1").className = "pwdStrengthShow";
document.getElementById("passwordStrengthHide2").className = "pwdStrengthShow";
document.getElementById("passwordStrengthHide3").className = "pwdStrengthShow";
// 错误信息隐藏
document.getElementById("showErrorMsgPic").className = "pwdStrengthHide";
document.getElementById("showErrorMsg").className = "pwdStrengthHide";
// 弱密码
if (score == 1) {
document.getElementById("passwordStrength00").style.background = "#FF0000";
document.getElementById("passwordStrength01").style.background = "#EFEFEF";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#000000";
document.getElementById("passwordStrengthFont01").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont02").style.color="#B0B0B0";
}
// 中密码
if (score == 2) {
document.getElementById("passwordStrength00").style.background = "#FFCC33";
document.getElementById("passwordStrength01").style.background = "#FFCC33";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont01").style.color="#000000";
document.getElementById("passwordStrengthFont02").style.color="#B0B0B0";
}
// 强密码
if (score == 3) {
document.getElementById("passwordStrength00").style.background = "#008000";
document.getElementById("passwordStrength01").style.background = "#008000";
document.getElementById("passwordStrength02").style.background = "#008000";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont01").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont02").style.color="#000000";
}
// 未输入内容为空的时候
} else {
// 不显示
document.getElementById("passwordStrengthHide1").className = "pwdStrengthHide";
document.getElementById("passwordStrengthHide2").className = "pwdStrengthHide";
document.getElementById("passwordStrengthHide3").className = "pwdStrengthHide";
// 更改背景颜色
afe1
为初始状态
document.getElementById("passwordStrength00").style.background = "#EFEFEF";
document.getElementById("passwordStrength01").style.background = "#EFEFEF";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 显示错误的信息
document.getElementById("showErrorMsgPic").className = "pwdStrengthShow";
document.getElementById("showErrorMsg").className = "pwdStrengthShow";
}
}
</script>
</head>
<body>
<table align="center" border="0" width="45%" id="registerTal" height="50%">
<tr>
<td rowspan="2" class="td1"><label for="pass">密码</label></td>
<td rowspan="2" class="td2"><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/></td>
<td class="td3">
<div id="showErrorMsgPic" class="pwdStrengthHide">
<img src="images/pic_02.gif"/>
</div>
<div id="showErrorMsg" class="pwdStrengthHide">
<div id="msgContext">
请输入密码!
</div>
</div>
<div id="passwordStrengthHide1" class="pwdStrengthHide">
<div id="passwordStrength00" class="strength"></div>
<div id="passwordStrength01" class="strength"></div>
<div id="passwordStrength02" class="strength"></div>
</div>
</td>
<td rowspan="2" class="td1">
<div id="passwordStrengthHide3" class="pwdStrengthHide">
<img src="images/pic_03.gif"/>
</div>
</td>
</tr>
<tr>
<td>
<div id="passwordStrengthHide2" class="pwdStrengthHide">
<div id="passwordStrengthFont00" class="strengthFont">弱</div>
<div id="passwordStrengthFont01" class="strengthFont">中</div>
<div id="passwordStrengthFont02" class="strengthFont">强</div>
</div>
</td>
</tr>
</table>
</body>
</html>
看到CSDN上的密码强度的验证，觉得挺不错的，顺便就没事写了下，但是技术比较有限，大虾多指导指导就是了，谢谢！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
/** css属性控制 */
label {
display: block;
float: left;
width: 70px;
margin: 0px 10px 0px 5px;
text-align: right;
line-height:1em;
font-weight:bold;
font-size:13px;
}
/** 文本框css样式 */
input {
width:200px;
height:25px;
border:1px solid #CCCCCC;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength00 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength01 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(不包含字体) */
#passwordStrength02 {
height:10px;
display:block;
float:left;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont00 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont01 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(仅字体部分) */
#passwordStrengthFont02 {
height:10px;
display:block;
float:left;
font-size:11px;
color:#B0B0B0;
}
/** 密码状态css样式(不包含字体) */
.strength {
width:50px;
background:#EFEFEF;
margin-left:1px;
margin-top:2px;
margin-bottom:0px;
}
/** 密码状态css样式(仅字体部分) */
.strengthFont {
text-align:center;
width:50px;
background:#FFFFFF;
margin-left:1px;
margin-top:0px;
margin-bottom:2px;
}
/** 表格式样 */
#registerTal {
margin-top:20%;
}
/** 列式样 */
.td1{
width:10%;
}
/** 列式样 */
.td2{
width:25%;
}
/** 列式样 */
.td3{
width:20%;
}
/** 错误信息，密码强度式样(隐藏) */
.pwdStrengthHide {
display:none;
margin-left:4px;
}
/** 错误信息，密码强度式样(显示) */
.pwdStrengthShow {
display:block;
margin-left:4px;
}
/** 错误信息(区域) */
#showErrorMsg {
position: absolute;
width:80px;
height:20px;
margin-left:30px;
margin-top:-18px;
border:1px solid #FF0000;
background-color:#FDECB3;
}
/** 错误信息(字体) */
#msgContext {
margin-left:5px;
margin-top:1px;
font-size:13px;
}
</style>
<script>
function passwordStrength(password) {
var desc = new Array();
desc[1] = "弱";
desc[2] = "中";
desc[3] = "强";
var score = 0;
// 含有数字
if (password.match(/\d+/)) {
score ++;
}
// 大小写字母
if (password.match(/[a-z]/) || password.match(/[A-Z]/)) {
score ++;
}
// 特殊字符
if ( password.match(/.[!, @, #, $, %, ^, &, *, ?, _, +, ~, -, (,)]/) ) {
score ++;
}
// 将密码强度状态显示并且输入了内容时候
if (password.length > 0) {
// 密码状态显示
document.getElementById("passwordStrengthHide1").className = "pwdStrengthShow";
document.getElementById("passwordStrengthHide2").className = "pwdStrengthShow";
document.getElementById("passwordStrengthHide3").className = "pwdStrengthShow";
// 错误信息隐藏
document.getElementById("showErrorMsgPic").className = "pwdStrengthHide";
document.getElementById("showErrorMsg").className = "pwdStrengthHide";
// 弱密码
if (score == 1) {
document.getElementById("passwordStrength00").style.background = "#FF0000";
document.getElementById("passwordStrength01").style.background = "#EFEFEF";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#000000";
document.getElementById("passwordStrengthFont01").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont02").style.color="#B0B0B0";
}
// 中密码
if (score == 2) {
document.getElementById("passwordStrength00").style.background = "#FFCC33";
document.getElementById("passwordStrength01").style.background = "#FFCC33";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont01").style.color="#000000";
document.getElementById("passwordStrengthFont02").style.color="#B0B0B0";
}
// 强密码
if (score == 3) {
document.getElementById("passwordStrength00").style.background = "#008000";
document.getElementById("passwordStrength01").style.background = "#008000";
document.getElementById("passwordStrength02").style.background = "#008000";
// 字体颜色改变
document.getElementById("passwordStrengthFont00").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont01").style.color="#B0B0B0";
document.getElementById("passwordStrengthFont02").style.color="#000000";
}
// 未输入内容为空的时候
} else {
// 不显示
document.getElementById("passwordStrengthHide1").className = "pwdStrengthHide";
document.getElementById("passwordStrengthHide2").className = "pwdStrengthHide";
document.getElementById("passwordStrengthHide3").className = "pwdStrengthHide";
// 更改背景颜色
afe1
为初始状态
document.getElementById("passwordStrength00").style.background = "#EFEFEF";
document.getElementById("passwordStrength01").style.background = "#EFEFEF";
document.getElementById("passwordStrength02").style.background = "#EFEFEF";
// 显示错误的信息
document.getElementById("showErrorMsgPic").className = "pwdStrengthShow";
document.getElementById("showErrorMsg").className = "pwdStrengthShow";
}
}
</script>
</head>
<body>
<table align="center" border="0" width="45%" id="registerTal" height="50%">
<tr>
<td rowspan="2" class="td1"><label for="pass">密码</label></td>
<td rowspan="2" class="td2"><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/></td>
<td class="td3">
<div id="showErrorMsgPic" class="pwdStrengthHide">
<img src="images/pic_02.gif"/>
</div>
<div id="showErrorMsg" class="pwdStrengthHide">
<div id="msgContext">
请输入密码!
</div>
</div>
<div id="passwordStrengthHide1" class="pwdStrengthHide">
<div id="passwordStrength00" class="strength"></div>
<div id="passwordStrength01" class="strength"></div>
<div id="passwordStrength02" class="strength"></div>
</div>
</td>
<td rowspan="2" class="td1">
<div id="passwordStrengthHide3" class="pwdStrengthHide">
<img src="images/pic_03.gif"/>
</div>
</td>
</tr>
<tr>
<td>
<div id="passwordStrengthHide2" class="pwdStrengthHide">
<div id="passwordStrengthFont00" class="strengthFont">弱</div>
<div id="passwordStrengthFont01" class="strengthFont">中</div>
<div id="passwordStrengthFont02" class="strengthFont">强</div>
</div>
</td>
</tr>
</table>
</body>
</html>
看到CSDN上的密码强度的验证，觉得挺不错的，顺便就没事写了下，但是技术比较有限，大虾多指导指导就是了，谢谢！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 手写注册页面，并实现验证信息（AJAX,Jquery,正则表达式，密码强度验证）
- JQ技术实现注册页面带有校验密码强度
- JS基于正则表达式实现的密码强度验证功能示例
- JQ技术实现注册页面带有校验密码强度
- PHP: WordPress 之 在注册界面 实现 注册后密码直接显示在页面上
- jsp注册页面，Ajax实现验证用户名是否存在，密码是否一致，当不存在时，注册按钮变成灰色。
- 使用JSP Servlet和Ajax实现简单的注册页面的用户名密码验证
- 1 完成登录页面（到记事本文件进行密码和用户名的验证）。 2 完成 用户注册页面（将注册信息显示在本页面 div 中）。
- JS密码强度验证(兼容IE,火狐,谷歌) -- 仿JQuery中文社区注册
- ASP.NET结合JS实现密码强度的验证功能（转）
- js实现密码强度验证
- 用js实现密码强度验证
- JS密码强度验证(兼容IE,火狐,谷歌) -- 仿JQuery中文社区注册
- js实现密码强度验证
- js实现密码强度验证
- yii框架实现注册页面短信验证60秒倒计时
- js在客户端验证密码强度，兼容FireFox和IE [转]
- js实现页面动态显示星级评价
- 0.jquery 验证，以及显示出现错误的地方 1.当用jquery.validate与ajax时候特别小心在每句后面的逗号问题，如果不需要的地方加上逗号会造成页面无法进入js验证
- jquery实现密码强度验证