用js来实现密码强度显示
分别提示低,中,高强度
全部代码如下:
代码写的是真丑,将就看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.div1{
display:inline;
float: left;
height: 20px;
width: 50px;
margin-left: 5px;
border: 1px solid red;
text-align: center;
}
</style>
<body>
<script type="text/javascript">
function check () {
var pwdstr=document.getElementById("pwd").value;
var arr=pwdstr.split('');
var num=0;
var zm=0;
var fh=0;
for (var i = 0,len=arr.length; i < len; i++) {
if (/[0-9]+/.test(arr[i])) {
num=1;
} else if (/[a-zA-Z]+/.test(arr[i])){
zm=1;
}else{
fh=1;
}
}
var sum=num+zm+fh;
if (sum==1) {
document.getElementById('di').style.backgroundColor='#FF0000';
return;
}else if(sum==2){
document.getElementById('di').style.backgroundColor='yellow';
document.getElementById('zhong').style.backgroundColor='yellow';
return;
}else if(sum==3){
document.getElementById('di').style.backgroundColor='green';
document.getElementById('zhong').style.backgroundColor='green';
document.getElementById('gao').style.backgroundColor='green';
return;
}else{
document.getElementById('di').style.backgroundColor='white';
document.getElementById('zhong').style.backgroundColor='white';
document.getElementById('gao').style.backgroundColor='white';
return;
}
}
</script>
<p>
<form action="" method="post">
密码:<input type="text" id="pwd" value="" onkeyup="check();"/>
<input type="reset" value="清空"/>
</form>
</p>
<div>
<div class="div1" id="di">低</div>
<div class="div1" id="zhong">中</div>
<div class="div1" id="gao">高</div>
</div>
</body>
</html>
也算勉强实现了吧,
微信扫一扫，打赏作者吧～
