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 相关文章推荐
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
如何使用vue3打造一个物料库
May 08 Vue.js
实例详解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
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
理解javascript对象继承
2016/04/17 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
python FTP编程基础入门
2021/02/27 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
大学四年的个人自我评价
2014/01/14 职场文书
模具专业求职信
2014/06/26 职场文书
环境卫生倡议书
2014/08/29 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL