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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
关于uniApp editor微信滑动问题
Jan 15 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
thinkphp缓存技术详解
2014/12/09 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
暑期培训班招生方案
2014/08/26 职场文书
房产公证委托书范本
2014/09/20 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
花木兰观后感
2015/06/10 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang
关于Redis的主从复制及哨兵问题
2022/06/16 Redis