代码均通过测试,效果图如下,如遇乱码将utf-8改为gb2312即可。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <mce:style type="text/css"><!-- body {font-size:12px} .pwd-strength-box, .pwd-strength-box-low, .pwd-strength-box-med, .pwd-strength-box-hi { color: #464646; text-align: center; width: 40px; } .pwd-strength-box-low { color: #CCCCCC; background-color: #E0FFA2; width: 40px; } .pwd-strength-box-med { color: #666666; background-color: #D1FF46; width: 40px; } .pwd-strength-box-hi { color: #000000; background-color: #C0F000; width: 40px; } --></mce:style><style type="text/css" mce_bogus="1"> body {font-size:12px} .pwd-strength-box, .pwd-strength-box-low, .pwd-strength-box-med, .pwd-strength-box-hi { color: #464646; text-align: center; width: 40px; } .pwd-strength-box-low { color: #CCCCCC; background-color: #E0FFA2; width: 40px; } .pwd-strength-box-med { color: #666666; background-color: #D1FF46; width: 40px; } .pwd-strength-box-hi { color: #000000; background-color: #C0F000; width: 40px; } </style> <mce:script type="text/javascript"><!-- /* 函数名称:trim() 函数功能: 去掉字符串的前后空格 传入参数:字符串变量 传出结果:去掉前后空格后的字符串 */ function trim(srcStr) { var i,j,len; len=srcStr.length; for(i=0;i<len;i++) if(srcStr.charAt(i)!=' ') break; for(j=len-1;j>=i;j--) if(srcStr.charAt(j)!=' ') break; if(i>j) return ""; else return srcStr.substr(i,j-i+1); } function $(obj) { return document.getElementById(obj); } //检查密码等级 function checkpwdlevel(pwd) { var objLow=document.getElementById("pwdLow"); var objMed=document.getElementById("pwdMed"); var objHi=document.getElementById("pwdHi"); objLow.className="pwd-strength-box"; objMed.className="pwd-strength-box"; objHi.className="pwd-strength-box"; if(pwd.length<6) { objLow.className="pwd-strength-box-low"; } else { var p1= (pwd.search(/[a-zA-Z]/)!=-1) ? 1 : 0; var p2= (pwd.search(/[0-9]/)!=-1) ? 1 : 0; var p3= (pwd.search(/[^A-Za-z0-9_]/)!=-1) ? 1 : 0; var pa=p1+p2+p3; if(pa==1) { objLow.className="pwd-strength-box-low"; } else if(pa==2) { objLow.className="pwd-strength-box-low"; objMed.className="pwd-strength-box-med"; } else if(pa==3) { objLow.className="pwd-strength-box-low"; objMed.className="pwd-strength-box-med"; objHi.className="pwd-strength-box-hi"; } } } // --></mce:script> </head> <body> <table width="100%" border="0" cellspacing="0"> <tr> <td height="32" align="right" style="width: 83px"> 密码:</td> <td align="left"> <input id="password" type="password" size="18" name="userpwd" runat="server" οnkeyup="javascript:checkpwdlevel(this.value);" class="register_input" /></td> </tr> <tr> <td height="32" align="right" style="width: 83px"> 安全性等级:</td> <td align="left"> <table style="border-left: 1px solid #7CA001; border-top: 1px solid #7CA001; border-right: 1px solid #7CA001; border-bottom: 1px solid #7CA001;" mce_style="border-left: 1px solid #7CA001; border-top: 1px solid #7CA001; border-right: 1px solid #7CA001; border-bottom: 1px solid #7CA001;" cellspacing="0" cellpadding="0" width="120px"> <tbody> <tr> <td class="pwd-strength-box" id="pwdLow" style="width: 40px; height: 16px" align="center" valign="bottom"> 弱</td> <td class="pwd-strength-box" id="pwdMed" style="width: 40px; height: 16px" align="center" valign="bottom"> 中</td> <td class="pwd-strength-box" id="pwdHi" style="width: 40px; height: 16px" align="center" valign="bottom"> 强</td> </tr> </tbody> </table> </td> </tr> </table> </body> </html>