`
as1001001
  • 浏览: 89955 次
  • 性别: 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
分享到:
评论

相关推荐

    JavaScript 校验密码强度

    这篇博客文章“JavaScript 校验密码强度”将深入探讨如何使用JavaScript来实现这一功能。 首先,我们需要理解密码强度的标准。常见的标准包括长度、字符复杂性(如大小写字母、数字、特殊字符的组合)、是否包含...

    javascript校验密码强度

    在JavaScript中校验密码强度通常涉及以下几个方面: 1. **长度检查**:密码长度是衡量强度的一个重要因素。通常建议密码长度至少为8个字符,但更长的密码更安全。可以设置一个最小长度限制,并通过JavaScript函数来...

    JS密码强度检测及测试

    使用JS检测输入的密码强度,可以独立于HTML页面,测试文件将其写在一起,需要的读者可以分开测试

    vue.js表单密码强度验证代码.zip

    这个"vue.js表单密码强度验证代码"是专门为Vue.js项目设计的一个功能,用于增强用户在手机注册表单中输入密码时的安全性。通过这种验证机制,用户可以得到实时反馈,了解他们设置的密码是否足够强壮,从而降低账户被...

    js密码强度校验

    现在很多论坛和博客都在用户注册时添加了验证密码强度的功能,在以前的文章中,我们曾经给出过一段检验密码强度的例子,今天再看一个与《js密码强度校验》的代码。 效果: &lt;html&gt; &lt;head&gt; [removed] //...

    漂亮表单验证和密码强度的验证

    为了实现这些策略,可以编写JavaScript函数来检测密码是否满足条件,并通过动态修改密码强度指示器(如`vr_sd_999.gif`这样的图片)来实时反馈。同时,也可以引入第三方库,如zxcvbn,它能根据密码的复杂度给出评分...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    密码强度的显示通常通过一个进度条或者文字提示来实现,这需要额外的JavaScript代码配合。在这个实例中,我们可能会看到一个动态更新的元素,它根据密码的复杂性(如长度、特殊字符的存在等)改变颜色或填充程度,以...

    正则表达式判断密码强度

    在Web应用开发中,例如"WebApplication2"这样的项目,可以利用前端验证(如JavaScript)和后端验证(如服务器端语言如Java、Python等)双重校验密码强度,以提供更高的安全性。前端验证可以即时反馈给用户,而后端...

    js 校验密码重复的代码

    根据给定的文件信息,我们可以总结出以下关于“js校验密码重复的代码”的相关知识点: ### 一、正则表达式基础 在JavaScript中,正则表达式是一种用于匹配字符串模式的强大工具。它们可以用来搜索、替换或验证文本...

    vue.js表单输入框密码强度验证代码

    本示例“Vue.js表单输入框密码强度验证代码”专注于创建一个功能,实时评估用户在注册表单中输入的密码强度,并提供相应的反馈。这种交互式的用户体验可以帮助用户创建更安全的密码,降低账户被破解的风险。 实现这...

    java-jquery密码强度校验

    前台jquery实现密码强度的校验,防止密码强度太弱,java防止jquery验证被跳过,实现同原理的密码重复校验

    漂亮的jsp密码强度检测

    jsp密码强度检测jsp密码强度检测jsp密码强度检测

    javascript密码强度检测

    JavaScript密码强度检测通常涉及到以下几个方面: 1. **长度检查**:检查密码的长度,通常建议密码至少包含8个字符。更长的密码通常意味着更高的安全性。 2. **字符多样性**:检查密码是否包含大写字母、小写字母...

    jquery密码强度验证

    `jQuery`作为一款广泛使用的JavaScript库,提供了便捷的方式来增强用户体验并实现复杂的前端功能,其中包括密码强度验证。本篇文章将深入探讨如何使用jQuery实现密码强度验证,并针对描述中的6、7、8位密码长度进行...

    密码强度进度条

    在IT领域,尤其是在用户体验设计和安全性方面,"密码强度进度条"是一个常见且重要的元素。这个实例涉及到两个关键的设计概念:动态进度条和密码强度指示器。这两种元素都是为了提高用户的交互体验和增强系统的安全性...

    js正则表达式验证密码强度【推荐】

    本文详细介绍了如何使用JavaScript语言结合正则表达式来验证密码强度,并通过实例代码的形式对这一技术进行了演示。通过本文的介绍,我们可以了解到如何通过编写正则表达式,根据不同的密码规则来判断密码强度,并...

    javascript密码强度校验代码(两种方法)

    为了保证网站个人信息的安全,很多网站在注册页面都设置密码强度这项,用javascript如何实现密码强度校验代码呢?下面小编给大家整理了两种方法使用javascript密码强度校验代码,有需要的朋友可以参考下

    Js密码强度验证

    在本文中,我们将深入探讨如何使用JS实现密码强度验证功能,以便用户可以创建安全且符合最佳实践的密码。 密码强度验证是用户界面中一个至关重要的元素,它有助于确保用户选择的密码既复杂又难以猜测。以下是一些...

    JavaScript简单的密码强度验证

    本文将详细介绍如何使用JavaScript实现简单的密码强度验证。 首先,我们需要了解一个强密码的基本特征。通常,一个强密码应包含以下要素: 1. 长度:至少8个字符,但更长更好。 2. 大写字母:至少一个大写字母,...

    密码强度插件Power PWChecker.zip

    总结来说,Power PWChecker是一款实用的密码强度检测插件,通过JS特效和CSS样式实现交互反馈,帮助用户创建更安全、符合策略的密码,同时提升了网页的用户体验。开发者可以根据自身需求进行定制,确保其在项目中的...

Global site tag (gtag.js) - Google Analytics