编程 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实现无刷新更新数据的详细步骤 asp

Dec 26 Javascript

jQuery 数据缓存data(name, value)详解及实现

Jan 04 Javascript

Js切换功能的简单方法

Nov 23 Javascript

jquery基础教程之deferred对象使用方法

Jan 22 Javascript

Jquery 分页插件之Jquery Pagination

Aug 25 Javascript

有关jquery与DOM节点操作方法和属性记录

Apr 15 Javascript

jQuery实现图片轮播效果代码

Sep 27 Javascript

用js实现博客打赏功能

Oct 24 Javascript

VUE JS 使用组件实现双向绑定的示例代码

Jan 10 Javascript

Node.js模块全局安装路径配置方法

May 17 Javascript

vue 获取及修改store.js里的公共变量实例

Nov 06 Javascript

JQuery事件委托(适用于给动态生成的脚本元素添加事件)

Feb 01 jQuery

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