JavaScript动态检测密码强度原理及实现方法详解
本文实例讲述了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>www.jb51.net 密码强度检测</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>
运行效果
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
PS：这里再为大家提供几款相关在线工具供大家参考使用：
密码安全性在线检测：
http://tools.jb51.net/password/my_password_safe
在线随机数字/字符串生成工具：
http://tools.jb51.net/aideddesign/suijishu
高强度密码生成器：
http://tools.jb51.net/password/CreateStrongPassword
JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript
正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
javascript密码强度校验代码（两种方法）
先看效果图: javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo. 第一种方法: /* *密码安全程度 *return :全部为字母或者数字,或者密码长度小于 *return : 字母数字组成,或者字母特殊字符,或者数字和特殊字符 *return : 字母和数字和特殊字符 */ String.prototype.passwordStrength=function(){ if(this.length> && this.length<=) retur
-
js检测用户输入密码强度
一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效
-
用于判断用户注册时，密码强度的JS代码
<script language=javascript> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122) //小写 return 4; else retu
-
js检验密码强度(低中高)附图
最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type=
-
js在客户端验证密码强度，兼容FireFox和IE
function EvaluatePassword(word) { if (word == "") { return 0; } else if (word.length [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 改成这样的也行-- 密码: function ck(t){ n.innerText=/(?:^(w)1{0,8}$)|^(?:(0?1?2?3?4?5?6?7?8?9?0?)2?$)|^w{0,6}$/i.test(t)?'太简单了':'还行吧'; } [Ct
-
JavaScript 密码强度判断代码
复制代码 代码如下: <script type="text/javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字 return 1; if (iN>=65 && iN <=90) //大写字母 return 2; if (iN>=97 && iN <=122)
-
javascript 密码强度验证规则、打分、验证（给出前端代码，后端代码可根据强度规则翻译）
前言: 密码强度是一个很普遍的功能,比较简单,主要是怎么制定这个强度规则.现在需要升级密码强度的验证,以前的验证比较简单,现在已经不能满足需求了,现在需要可灵活变化并有多级别可配置选择的一个密码强度验证,所以就设计了下面这个东东.在设计前也参考了下比较成熟的强度规则,大同小异,不外乎都采取了打分的机制来控制密码强度规则,这样可配置性高,灵活.本来想直接拿来用的,但是发现都比较旧,有些不太适宜公司开发的需求,可能这个东西比较简单吧,所以也没什么人去更新和写新的代码,所以还是自己动手设计了规则和写了
-
js正则表达式验证密码强度【推荐】
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400
-
JS实现的四级密码强度检测功能示例
本文实例讲述了JS实现的四级密码强度检测功能.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 密码强度检测 </title> <meta http-equiv=&quo
-
js密码强度校验
现在很多论坛和博客都在用户注册时添加了验证密码强度的功能,在以前的文章中,我们曾经给出过一段检验密码强度的例子,今天再看一个与<js密码强度校验>的代码. 效果: <html> <head> <script language="javascript"> //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN <=57) //数字
-
JS 密码强度验证(兼容IE,火狐,谷歌)
大概样式: 源码: 复制代码 代码如下: //=================HTML页面================= <body onload="InitCss();"> <form> <div> <table> <tr> <td> 密码: </td> <td> <input id="txtPassword" type="password&quo
-
js实现密码强度检测【附示例】
这篇文章主要介绍了js实现密码强度检测的相关实例,第一个例子给出了全部代码,可以直接运行,第二个例子只给出了js代码,感兴趣的码农可以自己完成第二个实例. 第一个实例 这段JavaScript代码比较实用,它完成用户注册时判断用户输入密码的强度,分强.弱.中三等级,它可以根据用户输入的密码显示对应的密码强弱等级,方便用户改进输入. 实现代码: <html> <head> <title>JS判断密码强度</title> <script language=