<!doctype html> <html> <head> <meta charset="utf-8"> <title>密码强度输入测试</title> <style type="text/css"> .cont { margin-left:300px; margin-top:50px; border:solid 1px #ccc; width:520px; padding:20px;} .passwd { margin-bottom: 10px; } table td p { display:block; border-top:solid 4px #ccc; text-align:center; margin-right:10px; line-height:22px;} .red { border-top-color:#e00;} .green { border-top-color:#3C3;} .blue { border-top-color:#0CF;} .passwd span { font-size: 13px; color: #888; } .passwd span em { color:#f00; font-style:normal;} </style> </head> <body> <div class="cont"> <div class="passwd">密码：<input name="" type="password" id="passwd" /> <span><em>*</em>6-16位，由字母（区分大小写）、数字、符号组成</span> </div> <table width="200" border="0" cellpadding="0" cellspacing="0"> <tr> <td><p>弱</p></td> <td><p>中</p></td> <td><p>强</p></td> </tr> </table> </div> <script type="text/javascript"> var reg = /[^A-z0-9]|[^[]]/ ; var s = reg.test("ds33"); console.log(s); var pass = document.getElementById("passwd"); var zt = document.querySelectorAll("table tr p"); pass.addEventListener("focus",jiance); pass.addEventListener("blur",shifang); function shifang (e){ ceshi(e); pass.removeEventListener("keyup",ceshi); } function jiance (){ pass.addEventListener("keyup",ceshi); } function ceshi (e){ var txt = e.target.value ; if(txt.length>16){ e.target.value = txt.substr(0,16); } if(txt){ var qiangdu = AuthPasswd(txt); switch (qiangdu){ case 0: zt[0].className = "red"; zt[1].className = ""; zt[2].className = ""; break; case 1: zt[0].className = "red"; zt[1].className = "green"; zt[2].className = ""; break; case 2: zt[0].className = "red"; zt[1].className = "green"; zt[2].className = "blue"; break; } } else { zt[0].className = ""; zt[1].className = ""; zt[2].className = ""; } } function AuthPasswd(string) { if(string.length >=6) { if(/[a-zA-Z]/.test(string) && /[0-9]/.test(string) && /[^A-z0-9]|[^[]]/.test(string)) { return 2 ; }else if(/[a-zA-Z]/.test(string) || /[0-9]/.test(string) || /[^A-z0-9]|[^[]]/.test(string)) { if(/[a-zA-Z]+/.test(string) && /[0-9]/.test(string)) { return 1 ; }else if(/[a-zA-Z]/.test(string) && /[^A-z0-9]|[^[]]/.test(string)) { return 1 ; }else if(/[0-9]/.test(string) && /[^A-z0-9]|[^[]]/.test(string)) { return 1 ; }else{ return 0 ; } } }else{ return 0 ; } } </script> </body> </html>
直接写一个代码吧，没什么技术含量。