编程 Javascript

javascripit实现密码强度检测代码分享

Posted in Javascript onDecember 12, 2013

<!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>
    <style type="text/css">
        body{font:12px/1.5 Arial;} input{float:left;font-size:12px;width:150px;font-family:arial;border:1px
        solid #ccc;padding:3px;} input.correct{border:1px solid green;} input.error{border:1px
        solid red;} #tips{float:left;margin:2px 0 0 20px;} #tips span{float:left;width:50px;height:20px;color:#fff;overflow:hidden;background:#ccc;margin-right:2px;line-height:20px;text-align:center;}
        #tips.s1 .active{background:#f30;} #tips.s2 .active{background:#fc0;} #tips.s3
        .active{background:#cc0;} #tips.s4 .active{background:#090;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oTips = document.getElementById("tips");
            var oInput = document.getElementsByTagName("input")[0];
            var aSpan = oTips.getElementsByTagName("span");
            var aStr = ["弱", "中", "强", "非常好"];
            var i = 0;
            oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
                var index = checkStrong(this.value);
                this.className = index ? "correct": "error";
                oTips.className = "s" + index;
                for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
                index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])
            }
        };
        /** 强度规则
            + ------------------------------------------------------- +
            1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；
            2) 任何字符数的两类字符组合，中；
            3) 12位字符数以下的三类或四类字符组合，强；
            4) 12位字符数以上的三类或四类字符组合，非常好。
            + ------------------------------------------------------- +
            **/
        //检测密码强度
        function checkStrong(sValue) {
            var modes = 0;
            if (sValue.length < 6) return modes;
            if (/\d/.test(sValue)) modes++; //数字
            if (/[a-z]/.test(sValue)) modes++; //小写
            if (/[A-Z]/.test(sValue)) modes++; //大写  
            if (/\W/.test(sValue)) modes++; //特殊字符
            switch (modes) {
            case 1:
                return 1;
                break;
            case 2:
                return 2;
            case 3:
            case 4:
                return sValue.length < 12 ? 3 : 4
                break;
            }
        }
    </script>
</head>
<body>
    <input type="password" value="" maxlength="16" />
    <div id="tips">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript修改表格背景色实例代码分享

Dec 10 Javascript

javascript 对象数组根据对象object key的值排序

Mar 09 Javascript

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

May 12 Javascript

JS实现的Select三级下拉菜单代码

Aug 20 Javascript

基于jquery实现左右按钮点击的图片切换效果

Jan 27 Javascript

第三篇Bootstrap网格基础

Jun 21 Javascript

bootstrap滚动监控器使用方法解析

Jan 13 Javascript

jquery对象与DOM对象转化

Feb 08 Javascript

bootstrap table操作技巧分享

Feb 15 Javascript

Javascript实现一个简单的输入关键字添加标签效果实例

Jun 01 Javascript

带你了解session和cookie作用原理区别和用法

Aug 14 Javascript

vue动态设置img的src路径实例

Sep 18 Javascript

jQuery获取Radio,CheckBox选择的Value值(示例代码)

Dec 12 #Javascript

Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

Dec 12 #Javascript

JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器

Dec 12 #Javascript

js中typeof的用法汇总

Dec 12 #Javascript

使用js判断数组中是否包含某一元素(类似于php中的in_array())

Dec 12 #Javascript

解析页面加载与js函数的执行 onload or ready

Dec 12 #Javascript

js实现弹窗插件功能实例代码分享

Dec 12 #Javascript