哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～
<body >
</body>
</html>
<script type="text/javascript">
var Detection = function () {
var pwd = document.getElementById(‘pwd‘).value;
DIV = document.getElementById(‘TBDIV‘),
//DIV.innerHTML = ‘‘;
TB=document.getElementById(‘pwdStrong‘),
TDS = TB.getElementsByTagName(‘td‘),
len = TDS.length;
for (var i = 0; i < len; i++) {
TDS[i].style.backgroundColor = ‘silver‘;
}
var regFigure = /^\d+$/;
figure = regFigure.test(pwd),
regLetter = /^[A-Za-z]+$/,
letter = regLetter.test(pwd),
//var regAlphanumeric =/^\w{1,6}$/;下划线记录在特殊字符中
//var alphanumeric = regAlphanumeric.test(pwd);
regAlphanumericMore = /^[A-Za-z0-9]+$/,
alphanumericmore = regAlphanumericMore.test(pwd),
regSpecialCharacter = /[^A-Za-z0-9]+/,//不适用\W
specialCharecter = pwd.match(regSpecialCharacter);
if (pwd.length >= 6 && pwd.length <= 16) {
// DIV.appendChild(TB);
DIV.style.display = ‘block‘;
if (figure || letter) {//全数字或字母并且长度小于是6位：弱
TDS[0].style.backgroundColor = ‘red‘;
} else if (specialCharecter) {//大于6位包含特殊字符：强
TDS[0].style.backgroundColor = ‘green‘;
TDS[1].style.backgroundColor = ‘green‘;
TDS[2].style.backgroundColor = ‘green‘;
} else if (regAlphanumericMore) {//大于6位并且不包含特殊字符：中
TDS[0].style.backgroundColor = ‘yellow‘;
TDS[1].style.backgroundColor = ‘yellow‘;
}
} else {
DIV.style.display = ‘none‘;
// DIV.innerHTML = ‘<strong>密码长度应为6~16个字符</strong>‘;
}
};
var arrInfo = [‘弱‘, ‘中‘, ‘强‘],
pwdPlease = ‘请输入密码:‘;
window.onload = function () {
var stron = document.createElement(‘strong‘);
stron.innerText = pwdPlease;
var txt = document.createElement(‘input‘);
txt.id = ‘pwd‘;
txt.onkeyup = Detection;
var TB = document.createElement(‘table‘);
TB.border = 1;
TB.style.position = ‘absolute‘;
TB.style.top = ‘40px‘;
TB.style.left = ‘103px‘;
TB.style.width = ‘155px‘;
TB.id = ‘pwdStrong‘;
var TR = TB.insertRow(-1);
for (var i = 0; i < 3; i++) {
var TD = TR.insertCell(-1);
TD.innerText = arrInfo[i];
//TR.appendChild(TD);
TD.style.backgroundColor = ‘silver‘;
TD.align = ‘center‘;
TD.id = i;
}
var DIV = document.createElement(‘div‘);
DIV.id = ‘TBDIV‘;
DIV.style.display = ‘none‘;
DIV.appendChild(TB);
document.body.appendChild(stron);
document.body.appendChild(txt);
document.body.appendChild(DIV);
};
</script>
百度浏览器效果图：
原文：http://www.cnblogs.com/wjshan0808/p/3550196.html