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 利用Cookie记录用户登录信息
Dec 08 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
jquery 插件开发备注
Aug 27 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
Aug 24 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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
一个PHP日历程序
2006/12/06 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
迪斯尼假期(欧洲、中东及非洲):Disney Holidays EMEA
2021/02/15 全球购物
创先争优活动方案
2014/02/12 职场文书
团购业务员岗位职责
2014/03/15 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
禁毒心得体会范文
2016/01/15 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android
golang使用map实现去除重复数组
2022/04/14 Golang