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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
很棒的vue弹窗组件
May 24 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
python中如何使用虚拟环境
2020/10/14 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
网站开发实习生的自我评价
2013/12/11 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
《雷雨》教学反思
2016/02/20 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP