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 相关文章推荐
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
详解JavaScript中的4种类型识别方法
Sep 14 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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
You might like
初探PHP5
2006/10/09 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
offsetParent 算法分析
2010/04/05 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
python中字符串变二维数组的实例讲解
2018/04/03 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
python获取中文字符串长度的方法
2018/11/14 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
幼儿教育感言
2014/02/05 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
运动会加油稿20字
2014/11/15 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
HTML中的表单元素介绍
2022/02/28 HTML / CSS