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 相关文章推荐
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
jQuery 判断图片是否加载完成方法汇总
Aug 10 Javascript
详解javascript new的运行机制
Jan 26 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
May 09 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
聊聊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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Exjs 入门篇
2010/04/07 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
python打开使用的方法
2019/09/30 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
村委会换届选举方案
2014/05/03 职场文书
2014预备党员批评与自我批评思想汇报
2014/09/20 职场文书
考研导师推荐信范文
2015/03/27 职场文书
辩护词范文大全
2015/05/21 职场文书