JavaScript密码强度检测

最新推荐文章于 2021-10-28 10:49:41 发布

jhlovett

最新推荐文章于 2021-10-28 10:49:41 发布

阅读量211

点赞数

分类专栏： Javascript 文章标签： JavaScript J# XHTML CSS HTML ViewUI

Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<!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>
    <title>密码强度检测</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
    <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;
    }
</style>

    <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";
        }
    }
}
    </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;" 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>