这周做的win8项目中在注册页出现有测试密码强度的应用,代码如下:
/css样式代码//
<style type="text/css">
body{
font-size:12px;
font-family: arial, helvetica, sans-serif;
margin:0;
}
form{
margin:2em;
}
#chkresult{margin-left:53px;height:15px;}
</style>
,,,,,,,,,,,,,,相应的js代码,,,,,,,,,,,,,,,,,,,,,
<script language="javascript">
function PasswordStrength(showed) {
this.showed = (typeof (showed) == "boolean") ? showed : true;
this.styles = new Array();
this.styles[0] = { backgroundColor: "#EBEBEB", borderLeft: "solid 1px #FFFFFF", borderRight: "solid 1px #BEBEBE", borderBottom: "solid 1px #BEBEBE" };
this.styles[1] = { backgroundColor: "#FF4545", borderLeft: "solid 1px #FFFFFF", borderRight: "solid 1px #BB2B2B", borderBottom: "solid 1px #BB2B2B" };
this.styles[2] = { backgroundColor: "#FFD35E", borderLeft: "solid 1px #FFFFFF", borderRight: "solid 1px #E9AE10", borderBottom: "solid 1px #E9AE10" };
this.styles[3] = { backgroundColor: "#95EB81", borderLeft: "solid 1px #FFFFFF", borderRight: "solid 1px #3BBC1B", borderBottom: "solid 1px #3BBC1B" };
this.labels = ["弱", "中", "强"];
this.divName = "pwd_div_" + Math.ceil(Math.random() * 100000);
this.minLen = 3;
this.width = "150px";
this.height = "16px";
this.content = "";
this.selectedIndex = 0;
this.init();
}
PasswordStrength.prototype.init = function () {
var s = '<table cellpadding="0" id="' + this.divName + '_table" cellspacing="0" style="width:' + this.width + ';height:' + this.height + ';">';
s += '<tr valign="middle">';
for (var i = 0; i < 3; i++) {
s += '<td id="' + this.divName + '_td_' + i + '" width="33%" align="center" valign="middle"><span style="font-size:1px"> </span><span id="' + this.divName + '_label_' + i + '" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">' + this.labels[i] + '</span></td>';
}
s += '</tr>';
s += '</table>';
this.content = s;
if (this.showed) {
document.write(s);
this.copyToStyle(this.selectedIndex);
}
}
PasswordStrength.prototype.copyToObject = function (o1, o2) {
for (var i in o1) {
o2[i] = o1[i];
}
}
PasswordStrength.prototype.copyToStyle = function (id) {
this.selectedIndex = id;
for (var i = 0; i < 3; i++) {
if (i == id - 1) {
this.$(this.divName + "_label_" + i).style.display = "inline";
} else {
this.$(this.divName + "_label_" + i).style.display = "none";
}
}
for (var i = 0; i < id; i++) {
this.copyToObject(this.styles[id], this.$(this.divName + "_td_" + i).style);
}
for (; i < 3; i++) {
this.copyToObject(this.styles[0], this.$(this.divName + "_td_" + i).style);
}
}
PasswordStrength.prototype.$ = function (s) {
return document.getElementById(s);
}
PasswordStrength.prototype.setSize = function (w, h) {
this.width = w;
this.height = h;
}
PasswordStrength.prototype.setMinLength = function (n) {
if (isNaN(n)) {
return;
}
n = Number(n);
if (n > 1) {
this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function () {
if (arguments.length == 0) {
return;
}
for (var i = 0; i < arguments.length && i < 4; i++) {
this.styles[i] = arguments[i];
}
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.write = function (s) {
if (this.showed) {
return;
}
var n = (s == 'string') ? this.$(s) : s;
if (typeof (n) != "object") {
return;
}
n.innerHTML = this.content;
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.update = function (s) {
if (s.length < this.minLen) {
this.copyToStyle(0);
return;
}
var ls = -1;
if (s.match(/[a-z]/ig)) {
ls++;
}
if (s.match(/[0-9]/ig)) {
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)) {
ls++;
}
if (s.length < 6 && ls > 0) {
ls--;
}
switch (ls) {
case 0:
this.copyToStyle(1);
break;
case 1:
this.copyToStyle(2);
break;
case 2:
this.copyToStyle(3);
break;
default:
this.copyToStyle(0);
}
}
</script>
</head>
<body>
<h4>密码强度检测功能</h4>
<table border="0" cellspacing="1" cellpadding="0" style="width: 29%">
<tr>
<td width="100" align="center">密码强度显示:</td>
<td>
<script language="javascript">
var ps = new PasswordStrength();
ps.setSize("200", "20");
ps.setMinLength(5);
</script>
</td>
</tr>
<tr>
<td align="right">请输入您的密码:</td>
<td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.update(this.value);"></td>
</tr>
</table>
</body>
</html>