用Javascript评估用户输入密码的强度

2016-02-19 22:18 8 1 收藏

今天天气好晴朗处处好风光,好天气好开始,图老师又来和大家分享啦。下面给大家推荐用Javascript评估用户输入密码的强度,希望大家看完后也有个好心情,快快行动吧!

【 tulaoshi.com - Web开发 】

  密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的密码进行安全评估,并显示出相应的提示信息,那么对用户设置一个安全的密码将有很大帮助。同时也使得网站更具人性化,更有吸引力.

  什么是一个安全的密码呢?本程序按以下的方式进行评估.

  1.如果密码少于5位,那么就认为这是一个弱密码.

  2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.

  3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码.

  4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码.

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  本程序将根据用户输入的密码分别显示不同的颜色表示密码的强度,具体程序如下:

    以下是引用片段:
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 
return 8; //特殊字符 

//bitTotal函数 
//计算出当前密码当中一共有多少种模式 
function bitTotal(num){ 
modes=0; 
for (i=0;i4;i++){ 
if (num & 1) modes++; 
num=1; 

return modes; 

//checkStrong函数 
//返回密码的强度级别 

function checkStrong(sPW){ 
if (sPW.length=4) 
return 0; //密码太短 
Modes=0; 
for (i=0;isPW.length;i++){ 
//测试每一个字符的类别并统计一共有多少种模式. 
Modes|=CharMode(sPW.charCodeAt(i)); 

return bitTotal(Modes); 

//pwStrength函数 
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色 

function pwStrength(pwd){ 
O_color="#eeeeee"; 
L_color="#FF0000"; 
M_color="#FF9900"; 
H_color="#33CC00"; 
if (pwd==null||pwd==''){ 
Lcolor=Mcolor=Hcolor=O_color; 

else{ 
S_level=checkStrong(pwd); 
switch(S_level) { 
case 0: 
Lcolor=Mcolor=Hcolor=O_color; 
case 1: 
Lcolor=L_color; 
Mcolor=Hcolor=O_color; 
break; 
case 2: 
Lcolor=Mcolor=M_color; 
Hcolor=O_color; 
break; 
default: 
Lcolor=Mcolor=Hcolor=H_color; 

document.getElementById("strength_L").style.background=Lcolor; 
document.getElementById("strength_M").style.background=Mcolor; 
document.getElementById("strength_H").style.background=Hcolor; 
return; 

/script 

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

form name=form1 action=""  
输入密码:input type=password size=10 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value) 
br密码强度: 
table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc" height="23" style='display:inline' 
tr align="center" bgcolor="#eeeeee" 

td width="33%" id="strength_L"弱/td 

td width="33%" id="strength_M"中/td 

td width="33%" id="strength_H"强/td 
/tr 
/table 

/form 

来源:https://www.tulaoshi.com/n/20160219/1628131.html

延伸阅读
标签: Web开发
密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,只需要很少的代码便能实现。 因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS。JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js 复制代码 代码如下: (function(...
标签: ASP
  Internet(或Intranet)上带权限的查询,只有“合法用户”才能进入。这种机制是通过Web程序实现的。在访问过程中,如果程序设计得不好,就会将用户口令暴露在地址栏里(举一个例子:http://www.mmm.nnn/default.asp ?superusername=john&passwd=john123,用户名john和密码john123全露出来了),这样系统就无保密和安全性可言了。怎样...
标签: Web开发
OA登录 贝因美冠军宝贝大赛专用信息平台入口 用户名或密码错误,请重新输入。 2006贝因美冠军宝贝大赛省级晋级赛进行时 帮助文档 意见反馈 222.212.7.171 [Ctrl+A 全选]
标签: Web开发
    一、密码长度: 5 分: 小于等于 4 个字符 10 分: 5 到 7 字符 25 分: 大于等于 8 个字符 二、字母: 0 分: 没有字母 10 分: 全都是小(大)写字母 20 分: 大小写混合字母 三、数字: 0 分: 没有数字 10 分: 1 个数字 20 分: 大于等于 3 个数字 四、符号: 0 分: 没有符号 10 分: 1 个符号 25 分: 大于 1 个符号 ...
标签: Web开发
一、密码长度: 5 分: 小于等于 4 个字符 10 分: 5 到 7 字符 25 分: 大于等于 8 个字符 二、字母: 0 分: 没有字母 10 分: 全都是小(大)写字母 20 分: 大小写混合字母 三、数字: 0 分: 没有数字 10 分: 1 个数字 20 分: 大于等于 3 个数字 四、符号: 0 分: 没有符号 10 分: 1 个符号 25 分: 大于 1 个符号 五、奖励: 2 分: 字母和数字 ...

经验教程

564

收藏

50
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部