CSS之密码强度检测 输入密码后单击空白处即可检测。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>用户密码强度检测</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> #ps1{padding:10px;margin:10px;background:#ccc;cursor:pointer} #s{border:1px solid #f00;display:inline-block;*display:inline;*zoom:1;padding:1px 10px 1px;font-size:12px;display:none;background:#f2f2f2} </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="sd"> <p>请输入密码：<input type="text" id="ps2"> <span id="s"> </span></p> </div> <script type="text/javascript"> function $(id){return document.getElementById(id);} $('ps2').onblur=function(){ var n=0,aaa; if (/d/.test($('ps2').value)) n ++; //包含数字 if (/[a-z]/.test($('ps2').value)) n ++; //包含小写字母 if (/[A-Z]/.test($('ps2').value)) n ++; //包含大写字母 if (/W/.test($('ps2').value)) n ++; //包含其他字符 if ($('ps2').value.length< 5) n=0; //长度小于5位 switch(n){ case 0 : aaa=" 密码长度至少6位"; break; case 1 : aaa=" 初级"; break; case 2 : aaa=" 中级"; break; case 3 : aaa=" 高级"; break; case 4 : aaa=" 安全级"; break; } $('s').style.cssText='display:inline-block;*display:inline;*zoom:1;'; $('s').innerHTML=aaa; } </script> </body> 不努力，还要青春干什么？