頁面代碼：
復制代碼 代碼如下:
<table>
<tr><td><input type="text" id="txtPwd" /></td></tr>
<tr><td>
<table id="pwdLever">
<tr>
<td>弱</td>
<td>中</td>
<td>強</td>
</tr>
</table>
</td></tr>
</table>
樣式：
復制代碼 代碼如下:
<style type="text/css">
#pwdLever td
{
background-color:Gray;
width:45px;
text-align:center;
}
</style>
js代碼：
復制代碼 代碼如下:
<script type="text/javascript">
window.onload = function () {
var textInput = document.getElementById("txtPwd");
//給密碼輸入框 注冊鍵放開事件
textInput.onkeyup = function () {
var pwdValue = this.value;
var num = pwdChange(pwdValue);
var tds = document.getElementById("pwdLever").getElementsByTagName("td");
//修改密碼顏色
if (num == 0 || num == 1) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "gray";
tds[2].style.backgroundColor = "gray";
}
else if (num == 2) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "red";
tds[2].style.backgroundColor = "gray";
}
else if (num == 3) {
tds[0].style.backgroundColor = "red";
tds[1].style.backgroundColor = "red";
tds[2].style.backgroundColor = "red";
}
else {
tds[0].style.backgroundColor = "gray";
tds[1].style.backgroundColor = "gray";
tds[2].style.backgroundColor = "gray";
}
}
}
function pwdChange(v) {
var num = 0;
var reg = /\d/; //如果有數字
if (reg.test(v)) {
num++;
}
reg = /[a-zA-Z]/; //如果有字母
if (reg.test(v)) {
num++;
}
reg = /[^0-9a-zA-Z]/; //如果有特殊字符
if (reg.test(v)) {
num++;
}
if (v.length < 6) { //如果密碼小於6
num--;
}
return num;
}
</script>