详细说明JavaScript动态检测密码强度的原理和实现方法

本文描述了用JavaScript动态检测密码强度的原理和实现方法。分享给大家参考，如下：

注册账号和设置密码时，会动态检测密码强度。在网上看了一些帖子，大部分都只写了具体的实现过程，没有写原理的分析过程。以下重点介绍其原理。

原理分析

实现密码强度动态判断一般有两种方案：

普通的。然而，它效率较低，难度较大。字符串、函数和运算符。这里用的是第二种方案，但是如何判断一个密码串的强弱呢？

通常，我们的密码设置为数字、字母(大小写)和特殊符号。

Strong:密码字符串包含其中三个或更多：密码字符串包含其中两个弱：密码字符串包含其中一个字符类型：二进制表示ASCII数字0001 48~57小写字母0010 97~122大写字母0100 65~90特殊字符1000其他：

二进制字符串表示十进制5972 0001 | | 0001 | | 0001 | | 0001 0001-1 BOA 0010 | | 0010-2 AOPA 0100 | | 0100 | | 0100 | | 0100 | | 0100-4 @ _ $ # 1000 | | 1000 | | 1000 | | 1000-8 12ab(2种)0001 | | 00011的数量越多，密码强度越强。有四盏灯，灯数越亮，照片越亮。

将数字1转换为强度：

循环4次，每次用1做“按位与”运算。如果为真，则强度级别为1，否则不添加。每个循环后，换档操作执行一次。

如A3cd:0111

第一次：0111 1=1；level=1；向右移动一位，0011第二次：0011 1=1；levle=2；向右移动一位，0001第三次：0001 1=1；级别=3；向右移动一位，第四次0000:0000 1=0；级别=3；向右移动一位，0000

级别是3，这是一个强密码。

代码实现

！DOCTYPE html html head meta charset=' utf-8 ' titlewww.jb51.net密码强度检测/title /head style type='text/css ' .默认{ background : # eeee }。弱{ background: # FF0000}。中等{ background: # FF9900}。strong { background: # 33CC00}输入{高： 20像素线高： 20px宽度： 210 px} span { display : inline-block；宽度： 70px高度： 30px线高： 30px背景# ddd文本对齐：中心；margin: 4px 2px}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var oInput=document。getelementbyid(' pwd ')；oInput.value=var spans=document。getelementsbytagname(' span ')；oInput.onkeyup=function(){ //strong度状态设为默认跨度[0]。类名=跨度[1]。类名=跨度[2]。class name=' defaultvar pwd=this . value var结果=0;for(var i=0，len=pwd.length我透镜；I){ result |=charType(pwd。charcodeat(I))；} var级别=0;//对结果进行四次循环，计算其(var I=0；I=4；i ){如果(结果1){级别；} //右移一位结果=结果1;} if(pwd。长度=6){开关(水平){案例1: span[0].类名='弱；打破；案例2:跨越[0]。类名='中；跨度[1]。类名='中；打破；案例3:案例4:跨越[0]。strong名称=' strong跨度[1]。strong名称=' strong跨度[2]。strong名称=' strong打破；} } } } /* 定义一个函数，对给定的数分为四类（判断密码类型),返回十进制1,2,4,8 数字0001 - 1 48~57 小写字母0010 - 2 97~122 大写字母0100 - 4 65~90 特殊1000 - 8 其它*/函数charType(num){ if(num=48 num=57){ return 1；} if(num=97 num=122){ return 2；} if(num=65 num=90){ return 4；}返回8;}/脚本正文标签为"="请输入密码：/labelinput id=' pwd ' type=' text ' name=' pwd '/br label for=' '密码强度：/labelspan弱/spanspan中/spanspan强/span /body/html运行效果

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

PS:这里再为大家提供几款相关在线工具供大家参考使用：

密码安全性在线检测：http://工具。JB 51。网络/密码/我的密码安全

在线随机数字/字符串生成工具：http://工具。JB 51。net/aidd design/suijishu

高强度密码生成器：http://工具。JB 51。net/password/CreateStrongPassword

Java脚本语言正则表达式在线测试工具：http://工具。JB 51。net/regex/JavaScript

正则表达式在线生成工具：http://工具。JB 51。net/regex/create _ reg

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript正则表达式技巧大全》 、 《JavaScript替换操作技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 、 《JavaScript中json操作技巧总结》 、 《JavaScript错误与调试技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。