JavaScript动态检测密码强度原理及实现方法详解


Posted in Javascript onJune 11, 2019

本文实例讲述了JavaScript动态检测密码强度原理及实现方法。分享给大家供大家参考,具体如下:

在注册账户,设置密码时,会出现密码强度动态检测,网上看了一些帖子,大多只写了具体的实现过程,而没有对原理的分析过程。下面着重讲一下其原理。

原理分析

通常实现密码强度动态判断有两种方案实现:

  • 正则。但其效率低一点,难度也大一些。
  • 字符串,函数和运算符。

这里用第二种方案,但是如何判断一个密码串是强还是弱呢?

一般我们的密码会设置为数字、字母(大小写)、特殊符号三类。

  • 强:密码串包含其中三种或以上
  • 中:密码串包含其中两种
  • 弱:密码串包含其中一种

字符类型 二进制表示 ASCII
数字 0001 48~57
小写字母 0010 97~122
大写字母 0100 65~90
特殊字符 1000 其他

如有一些字符串:

字符串 二进制表示 十进制
5972 0001 || 0001 || 0001 || 0001 0001 —> 1
boa 0010 || 0010 || 0010 0010 —> 2
AOPA 0100 || 0100 || 0100 || 0100 0100 —> 4
@!_$# 1000 || 1000 || 1000 || 1000 || 1000 1000 —> 8
12ab(2种) 0001 || 0001 || 0010 || 0010 0011—> 3
12Ab(3种) 0001 || 0001 || 0100 || 0010 0111—> 7
1_Ab(4种) 0001 || 1000 || 0100 || 0010 1111—> 15

也就是4位二进制数,1的个数越多,密码强度越大,四盏灯,亮的个数越多,照的越亮。

把1的个数转换为强度:

循环4次,每次和1做“位与”运算。如果得到真,那么强度等级+1,否则不加。每循环完一次,移位操作一次。

如A3cd:0111

第一次:0111 & 1 = 1; level = 1; 右移一位,0011
第二次:0011 & 1 = 1; levle = 2; 右移一位,0001
第三次:0001 & 1 = 1; level = 3; 右移一位,0000
第四次:0000 & 1 = 0; level = 3; 右移一位,0000

level为3,是强密码。

代码实现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>3water.com 密码强度检测</title>
  </head>
  <style type="text/css">
    .default {background: #eeeeee;}
    .weak {background: #FF0000;}
    .medium {background: #FF9900;}
    .strong {background: #33CC00;}
    input {height: 20px; line-height: 20px;width: 210px;}
    span {display: inline-block;width: 70px;height: 30px;line-height: 30px;background: #ddd;text-align: center;margin: 4px 2px;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var oInput = document.getElementById('pwd');
      oInput.value = '';
      var spans = document.getElementsByTagName('span');
      oInput.onkeyup = function(){
        //强度状态设为默认
        spans[0].className = spans[1].className = spans[2].className = "default";
        var pwd = this.value;
        var result = 0;
        for(var i = 0, len = pwd.length; i < len; ++i){
          result |= charType(pwd.charCodeAt(i));
        }
        var level = 0;
        //对result进行四次循环,计算其level
        for(var i = 0; i <= 4; i++){
          if(result & 1){
            level ++;
          }
          //右移一位
          result = result >>> 1;
        }
        if(pwd.length >= 6){
          switch (level) {
            case 1:
              spans[0].className = "weak";
              break;
            case 2:
              spans[0].className = "medium";
              spans[1].className = "medium";
              break;
            case 3:
            case 4:
              spans[0].className = "strong";
              spans[1].className = "strong";
              spans[2].className = "strong";
              break;
          }
        }
      }
    }
    /*
      定义一个函数,对给定的数分为四类(判断密码类型),返回十进制1,2,4,8
      数字 0001 -->1 48~57
      小写字母 0010 -->2 97~122
      大写字母 0100 -->4 65~90
      特殊 1000 --> 8 其它
    */
    function charType(num){
      if(num >= 48 && num <= 57){
        return 1;
      }
      if (num >= 97 && num <= 122) {
        return 2;
      }
      if (num >= 65 && num <= 90) {
        return 4;
      }
      return 8;
    }
  </script>
  <body>
    <label for="">请输入密码:</label><input id ='pwd' type="text" name="pwd" /><br>
    <label for="">密 码 强 度:</label><span>弱</span><span>中</span><span>强</span>
  </body>
</html>

运行效果

JavaScript动态检测密码强度原理及实现方法详解

JavaScript动态检测密码强度原理及实现方法详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

Javascript 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
angular.js实现购物车功能
Oct 23 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 #Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 #Javascript
vue.js中导出Excel表格的案例分析
Jun 11 #Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 #Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 #Javascript
vue2 中二级路由高亮问题及配置方法
Jun 10 #Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 #Javascript
You might like
php随机抽奖实例分析
2015/03/04 PHP
PHP生成树的方法
2015/07/28 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
python中循环语句while用法实例
2015/05/16 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python File readlines() 使用方法
2018/03/19 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
高三地理教学反思
2014/01/11 职场文书
责任书格式范文
2014/07/28 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python