JavaScript判断密码强度(自写代码)


Posted in Javascript onSeptember 06, 2013

在一些网站注册的时候经常可以看到密码强度提示,例如优酷:
JavaScript判断密码强度(自写代码) 
今天自己做了一个JS密码强度判断,效果如下:
JavaScript判断密码强度(自写代码) 
以下是代码:

<html> 
<head> 
<title>JS判断密码强度</title> 
<script language=javascript> 
//判断输入密码的类型 
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;i<4;i++){ 
if (num & 1) modes++; 
num>>>=1; 
} 
return modes; 
} 
//返回强度级别 
function checkStrong(sPW){ 
if (sPW.length<=4) 
return 0; //密码太短 
Modes=0; 
for (i=0;i<sPW.length;i++){ 
//密码模式 
Modes|=CharMode(sPW.charCodeAt(i)); 
} 
return bitTotal(Modes); 
} //显示颜色 
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> 
</head> 
<body> 
<form name=form1 action="" > 
<table width="250" border="0" cellpadding=2" bordercolor="#eeeeee" style='display:inline'> 
<tr> 
<td width="40%" align="right">密码:</td> 
<td colspan="3" align="left"> 
<input type=password size=20 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)> 
</td> 
</tr> 
<tr align="center"> 
<td width="40%" align="right">密码强度:</td> 
<td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td> 
<td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td> 
<td width="20%" id="strength_H" bgcolor="#f5f5f5">强</td> 
</tr> 
</table> 
</form> 
</body> 
</html>
Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 #Javascript
让网页跳转到指定位置的jquery代码非书签
Sep 06 #Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 #Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 #Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 #Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 #Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 #Javascript
You might like
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
浅析PHP文件下载原理
2014/12/25 PHP
ThinkPHP控制器详解
2015/07/27 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
推荐dojo学习笔记
2007/03/24 Javascript
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
python中循环语句while用法实例
2015/05/16 Python
python版本的读写锁操作方法
2016/04/25 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
Python Selenium截图功能实现代码
2020/04/26 Python
获取python运行输出的数据并解析存为dataFrame实例
2020/07/07 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
公司门卫的岗位职责
2014/02/19 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
遗失说明具结保证书
2015/02/26 职场文书
结婚堵门保证书
2015/05/08 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
MySQL基础(二)
2021/04/05 MySQL
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
配置Kubernetes外网访问集群
2022/03/31 Servers