用JS实现提示密码安全强度的密码框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框</title>
<style type="text/css">
*{
padding: 0px;
margin opx;
}
ul{
margin-left: 45px;
list-style: none;
}
li{
float: left;
width: 50px;
height:25px;
background-color: gray;
margin: 1px;
text-align: center;
line-height: 25px;
}
</style>
<script>
var pass;
onload = function(){
pass= document.getElementById("pass");
pass.onkeyup = passSequ; //编写一个键盘释放函数
}
passSequ = function(){
var li = document.getElementsByTagName("li");
switch(strength(pass.value))
{
case 1:li[0].style.backgroundColor="red";break;
case 2:
{
li[0].style.backgroundColor="yellow";
li[1].style.backgroundColor="yellow";
}break;
case 3:
{
li[0].style.backgroundColor="green";
li[1].style.backgroundColor="green";
li[2].style.backgroundColor="green";
}break;
default:
{
li[0].style.backgroundColor="gray";
li[1].style.backgroundColor="gray";
li[2].style.backgroundColor="gray";
}break;
}
}
function strength(s){
var x = 0;
if(s.match(/[0-9]/)) x++; //判断密码中是否有数字
if(s.match(/[a-z]/)) x++; //判断密码中是否有小写字母
if(s.match(/[^0-9a-z]/)) x++; //判断密码中是否有除数字小写字母外的元素
if((s.match(/[\u4e00-\u9fa5]/)) && (x<3)) x++;
if((s.length<6) && (x>1)) x--;
return x;
}
</script>
</head>
<body>
密码：<input type="text" id="pass">
<ul>
<li>弱</li>
<li>中</li>
<li>强</li>
</ul>
</body>
</html>
结果演示示例：
当密码长度较短时：
当密码加入字母，长度超过6时：
当密码足够长，加入特殊字符时：加粗样式