1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
| <style>
*{
padding:0;
margin:0;
}
.wrapper{
width:200px;
}
.wrapper input{
width:100%;
}
.color-hint{
display: flex;
list-style: none;
margin-top:10px;
}
.color-hint li{
display: inline-block;
width:33%;
height:10px;
border-radius: 5px;
}
</style>
<div class="wrapper">
<input type="text" oninput="pwCheck.init(this.value)">
<ul class="color-hint" id="color_hint">
<li style="background-color: #ccc"></li>
<li style="background-color: #ccc"></li>
<li style="background-color: #ccc"></li>
</ul>
</div>
<script>
var pwCheck = {
init: function(str) {
this.str = str;
this.checkStrong();
},
str: '',
// 检测字符是什么类型
CharMode: function(iN) {
if (iN >= 48 && iN <= 57) //数字
return 1;
if (iN >= 65 && iN <= 90) //大写字母
return 2;
if (iN >= 97 && iN <= 122) //小写
return 4;
else return 8; //特殊字符
},
// 检测有多少种类型字符
countType: function(str) {
var arrType = [];
if (str.length == 0) {
return 0;
}
if (str.length < 6) {
return 1;
}
for (var i = 0; i < str.length; i++) {
if ( arrType.indexOf( this.CharMode(str.charCodeAt(i)) ) == -1 ) {
arrType.push( this.CharMode(str.charCodeAt(i)) );
}
}
return arrType.length;
},
// 显示不同的颜色
checkStrong: function() {
var _this = this;
var str = _this.str;
var S_level = _this.countType(str);
H_color = "#cccccc";
R_color = "#ff4500";
O_color = "#ff7c00";
G_color = "#92ec00";
switch (S_level) {
case 0:
color_1 = H_color;
color_2 = H_color;
color_3 = H_color;
break;
case 1:
color_1 = R_color;
color_2 = H_color;
color_3 = H_color;
break;
case 2:
color_1 = R_color;
color_2 = O_color;
color_3 = H_color;
break;
default:
color_1 = R_color;
color_2 = O_color;
color_3 = G_color;
break;
}
var node = document.getElementById('color_hint').getElementsByTagName('li');
node[0].style.backgroundColor = color_1;
node[1].style.backgroundColor = color_2;
node[2].style.backgroundColor = color_3;
}
};
</script>
|
