标签:
1 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 2 <title></title> 3 <script type="text/javascript"> 4 5 onload = function () { 6 var tds = document.getElementById(‘tb‘).getElementsByTagName(‘td‘); 7 var txtPwd = document.getElementById(‘txt‘); 8 //键盘键入事件 9 document.getElementById(‘txt‘).onkeyup = function () { 10 var lv = checkPwd(this.value); 11 //查看密码的级别 12 document.getElementById(‘txt2‘).value = lv; 13 for (var i = 0; i < tds.length; i++) { 14 tds[i].style.backgroundColor = ‘‘; 15 } 16 if (lv <= 1) { 17 //弱 18 tds[0].style.backgroundColor = ‘red‘; 19 } 20 if (lv == 2) { 21 //中 22 tds[1].style.backgroundColor = ‘green‘; 23 tds[0].style.backgroundColor = ‘green‘; 24 } 25 if (lv == 3) { 26 //强 27 tds[0].style.backgroundColor = ‘blue‘; 28 tds[1].style.backgroundColor = ‘blue‘; 29 tds[2].style.backgroundColor = ‘blue‘; 30 } 31 }; 32 //1、准备一个判断密码级别的方法。 33 function checkPwd(pwd) { 34 var lvl = 0; 35 if (pwd.match(/[0-9]/)) { 36 lvl++; 37 } 38 if (pwd.match(/[a-zA-Z]/)) { 39 lvl++; 40 } 41 if (pwd.match(/[^0-9a-zA-Z]/)) { 42 lvl++; 43 } 44 if (pwd.length<=6) { 45 lvl--; 46 } 47 return lvl; 48 }; 49 }; 50 51 </script> 52 </head> 53 <body> 54 <input id="txt" type="text" name="name" value=" " /> 55 <input id="txt2" type="text" name="name" value=" " /> 56 <!--<input type="button" name="name" value=" " />--> 57 <table id="tb" border="1" style ="background-color:#B7B6B4;width:300px;height:30px;text-align:center;margin-top:20px"> 58 <tr> 59 <td>弱</td> 60 <td>中</td> 61 <td>强</td> 62 </tr> 63 </table> 64 </body> 65 </html>
标签:
原文地址:http://www.cnblogs.com/clcloveHuahua/p/5120518.html