js密码强度检测


Posted in Javascript onJanuary 07, 2016

本文实例讲解了js密码强度检测的实现代码,分享给大家供大家参考,具体内容如下

运行效果图:

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="" > 
密码:<input type=password size=8 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)> 
<br>密码强度: 
<table width="210" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22" style='display:inline'> 
<tr align="center" bgcolor="#f5f5f5"> 
<td width="33%" id="strength_L">弱</td> 
<td width="33%" id="strength_M">中</td> 
<td width="33%" id="strength_H">强</td> 
</tr> 
</table> 
</form>
</body>
</html>

这一款先看一看效果图。

js密码强度检测

具体内容:

<script>
function AuthPasswd(string) {
 if(string.length >=6) {
  if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string) && /\W+\D+/.test(string)) {
   noticeAssign(1);
  }else if(/[a-zA-Z]+/.test(string) || /[0-9]+/.test(string) || /\W+\D+/.test(string)) {
   if(/[a-zA-Z]+/.test(string) && /[0-9]+/.test(string)) {
    noticeAssign(-1);
   }else if(/\[a-zA-Z]+/.test(string) && /\W+\D+/.test(string)) {
    noticeAssign(-1);
   }else if(/[0-9]+/.test(string) && /\W+\D+/.test(string)) {
    noticeAssign(-1);
   }else{
    noticeAssign(0);
   }
  }
 }else{
  noticeAssign(null); 
 }
}
 
function noticeAssign(num) {
 if(num == 1) {
  $('#weak').css({backgroundColor:'#009900'});
  $('#middle').css({backgroundColor:'#009900'});
  $('#strength').css({backgroundColor:'#009900'});
  $('#strength').html('很强');
  $('#middle').html('');
  $('#weak').html('');
 }else if(num == -1){
  $('#weak').css({backgroundColor:'#ffcc33'});
  $('#middle').css({backgroundColor:'#ffcc33'});
  $('#strength').css({backgroundColor:''});
  $('#weak').html('');
  $('#middle').html('中');
  $('#strength').html('');
 }else if(num ==0) {
  $('#weak').css({backgroundColor:'#dd0000'});
  $('#middle').css({backgroundColor:''});
  $('#strength').css({backgroundColor:''});
  $('#weak').html('弱');
  $('#middle').html('');
  $('#strength').html('');
 }else{
  $('#weak').html(' ');
  $('#middle').html(' ');
  $('#strength').html(' ');
  $('#weak').css({backgroundColor:''});
  $('#middle').css({backgroundColor:''});
  $('#strength').css({backgroundColor:''});
 }
}
</script>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
JS常用表单验证方法总结
May 22 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
jquery实现的放大镜效果示例
Feb 24 jQuery
react项目从新建到部署的实现示例
Feb 19 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 #Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 #Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 #Javascript
JavaScript设计模式初探
Jan 07 #Javascript
JavaScript类型系统之Object详解
Jan 07 #Javascript
7个去伪存真的JavaScript面试题
Jan 07 #Javascript
jQuery表格插件datatables用法详解
Nov 23 #Javascript
You might like
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
php邮件发送的两种方式
2020/04/28 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
中学生差生评语
2014/01/30 职场文书
毕业寄语大全
2014/04/09 职场文书
学习型党组织心得体会
2014/09/12 职场文书
委托书范本
2014/09/13 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
签证工作证明模板
2015/06/15 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis
Tomcat用户管理的优化配置详解
2022/03/31 Servers
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL