js实现密码强度检测【附示例】


Posted in Javascript onMarch 30, 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>

第二个实例:

<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>

以上这篇js实现密码强度检测【附示例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
vue实现移动端悬浮窗效果
Dec 01 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
Apr 23 Javascript
vue路由教程之静态路由
Sep 03 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 #Javascript
Jquery判断form表单数据是否变化
Mar 30 #Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
You might like
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
干部行政关系介绍信
2014/01/17 职场文书
烹调加工管理制度
2014/02/04 职场文书
学校班班通实施方案
2014/06/11 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
学校运动会通讯稿
2015/07/18 职场文书
vue动态绑定style样式
2022/04/20 Vue.js