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 外部JS中： 49 window.onload = function () { 50 var txt = document.getElementById("txtPwd"); 51 var tb = document.getElementById("tb"); 52 var tds = tb.getElementsByTagName("td"); 53 54 for (var i = 0; i < tds.length; i++) { 55 tds[i].style.backgroundColor = "gray"; 56 } 57 58 //onkeydown 键盘落下，字符还没有录入到文本框 59 //onkeyup 键盘弹起 字符已经到文本框 60 txt.onkeyup = function () { 61 //获取文本框中的内容，（td背景颜色设置成灰色）判断强度 62 63 var tb = document.getElementById("tb"); 64 var tds = tb.getElementsByTagName("td"); 65 //按下键盘 初始化所有td 为灰色 66 for (var i = 0; i < tds.length; i++) { 67 tds[i].style.backgroundColor = "gray"; 68 } 69 70 71 //获取密码强度 72 var level = getLevel(this.value); 73 if (level == 0 || level == 1) { 74 //弱密码 75 tds[0].style.backgroundColor = "red"; 76 77 } else if (level == 2) { 78 //中密码 79 tds[0].style.backgroundColor = "red"; 80 tds[1].style.backgroundColor = "red"; 81 82 } else if (level == 3) { 83 //强密码 84 tds[0].style.backgroundColor = "red"; 85 tds[1].style.backgroundColor = "red"; 86 tds[2].style.backgroundColor = "red"; 87 } 88 } 89 } 90 //判断密码强度 91 function getLevel(txt) { 92 var num = 0; 93 //判断txt中是否有数字 94 var reg = /\d+/; 95 if (reg.test(txt)) { 96 num++; 97 } 98 //是否包含字母 99 var reg = /[a-z]+/i;100 if (reg.test(txt)) {101 num++;102 }103 //是否包含特殊符号104 var reg = /[^0-9a-zA-Z]+/;105 if (reg.test(txt)) {106 num++;107 }108 //如果密码长度小于6 强度-1109 if (txt.length < 6) {110 num--;111 }112 return num;113 }
获取值属性 