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代码
Sep 27 Javascript
全面解析多种Bootstrap图片轮播效果
May 27 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
微信小程序入门教程
Nov 18 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
详解webpack babel的配置
Jan 09 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
Puppet的一些技巧
Sep 17 Javascript
详解关于element el-button使用$attrs的一个注意要点
Nov 09 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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/10/09 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
JavaScript EventEmitter 背后的秘密 完整版
2018/03/29 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python文件的md5加密方法
2016/04/06 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
python实现大文本文件分割
2019/07/22 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
班主任工作经验材料
2014/02/02 职场文书
欢送退休感言
2014/02/08 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
新课程改革心得体会
2016/01/22 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
Redis RDB技术底层原理详解
2021/09/04 Redis
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python