`
as1001001
  • 浏览: 88310 次
  • 性别: Icon_minigender_1
  • 来自: 鞍山
社区版块
存档分类
最新评论

js校验密码强度

阅读更多
先说规则:
  密码可输入类型(字符,字母大写,字母小写,特殊字符)。
  基础分为,密码长度,一个长度为一分,大于18个字符都为18分;密码里面包含一种可输入类型,基础分加4分。
  加分为,一种密码可输入类型的总数量大于等于2个,加分2分,如果总数量大于等于5,加分4分。
  减分为,如果有连续重复的单个种类字符,则重复一次减1分。
  总分50分。
  0~10分:弱
  11~20分:一般
  21~30分:很好
  31~50分:极佳

界面是仿GOOGLE得验证做得。

//以下是密码强度校验
ratingMsgs = new Array(5);
ratingMsgColors = new Array(5);
barColors = new Array(5);
ratingMsgs[0] = "太短";
ratingMsgs[1] = "弱";
ratingMsgs[2] = "一般";
ratingMsgs[3] = "很好";
ratingMsgs[4] = "极佳";
ratingMsgColors[0] = "#676767";
ratingMsgColors[1] = "#aa0033";
ratingMsgColors[2] = "#f5ac00";
ratingMsgColors[3] = "#6699cc";
ratingMsgColors[4] = "#008000";
barColors[0] = "#dddddd";
barColors[1] = "#aa0033";
barColors[2] = "#ffcc33";
barColors[3] = "#6699cc";
barColors[4] = "#008000";
function passwordGrade(pwd) 
{
    var score = 0;
    var regexArr = ['[0-9]', '[a-z]', '[A-Z]', '[\\W_]'];
    var repeatCount = 0;
    var prevChar = '';
    //长度一个加一分,大于18按18算 
    var len = pwd.length;
    score += len > 18 ? 18 : len;
    //字符类型多一个加4分 
    for (var i = 0, num = regexArr.length; i < num; i++) {
        if (eval('/' + regexArr[i] + '/').test(pwd)) {
            score += 4;
        }
    }
    for (var i = 0, num = regexArr.length; i < num; i++) 
    {
        if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 2) {
            score += 2;
        }
        if (pwd.match(eval('/' + regexArr[i] + '/g')) && pwd.match(eval('/' + regexArr[i] + '/g')).length >= 5) {
            score += 2;
        }
    }
    //重复一次减一分
    for (var i = 0, num = pwd.length; i < num; i++) {
        if (pwd.charAt(i) == prevChar) {
            repeatCount++;
        }
        else {
            prevChar = pwd.charAt(i);
        }
    }
    score -= repeatCount * 1;
    return score;
}
//pwStrength函数 
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
function pwStrength(pwd)
{
    if (pwd == null || pwd == '') {
        resetBar();
    }
    else
    {
        if (pwd.length <= 4) {
            DrawBar(0);
            return;
        }
        var S_level;
        mark = passwordGrade(pwd);
        //弱
        if (mark <= 10) {
            S_level = 1;
        }
        //一般
        if (mark > 10 && mark <= 20) {
            S_level = 2;
        }
        //很好
        if (mark > 20 && mark <= 30) {
            S_level = 3;
        }
        //极佳
        if (mark > 30) {
            S_level = 4;
        }
        DrawBar(S_level);
    }
    return;
}
function DrawBar(rating) 
{
    var posbar = getElement('posBar');
    var negbar = getElement('negBar');
    var passwdRating = getElement('passwdRating');
    var barLength = getElement('passwdBarDiv').width;
    if (rating >= 0 && rating <= 4) {
        posbar.style.width = barLength  / 4 * rating;
        negbar.style.width = barLength  / 4 * (4 - rating);
    }
    else {
        posbar.style.width = 0;
        negbar.style.width = barLength;
        rating = 5;
    }
    posbar.style.background = barColors[rating];
    passwdRating.innerHTML = "<font color='" + ratingMsgColors[rating] + "'>" + ratingMsgs[rating] + "</font>";
}
function resetBar() 
{
    var posbar = getElement('posBar');
    var negbar = getElement('negBar');
    var passwdRating = getElement('passwdRating');
    var barLength = getElement('passwdBar').width;
    posbar.style.width = "0px";
    negbar.style.width = barLength + "px";
    passwdRating.innerHTML = "";
}
function getElement(name) 
{
    if (document.all) {
        return document.all(name);
    }
    return document.getElementById(name);
}

<INPUT id=Passwd onkeyup="pwStrength(this.value);" onBlur="pwStrength(this.value);" size=30 type=password name=Passwd>
<TABLE id=passwdBar border=0 cellSpacing=0 cellPadding=0 width=160 bgColor=#ffffff>
 <TBODY>
  <TR>
   <TD style="WIDTH: 0px; BACKGROUND: #ffcc33" id=posBar   bgColor=#e0e0e0 height=4 width=0%></TD>
   <TD style="WIDTH: 180px" id=negBar bgColor=#e0e0e0 height=4 width="100%"></TD>
  </TR>
 </TBODY>
</TABLE>

js代码格式整理网站http://tools.jb51.net/tools/js_geshihua.asp
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics