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 相关文章推荐
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
微信小程序 开发之全局配置
May 05 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
原生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操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
yii2.0框架多模型操作示例【添加/修改/删除】
2020/04/13 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
js中生成map对象的方法
2014/01/09 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
python 实现控制鼠标键盘
2020/11/27 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
程序员求职信
2014/04/16 职场文书
重阳节标语大全
2014/10/07 职场文书
公司2014年度工作总结
2014/12/10 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
辞职信格式范文
2015/05/13 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Python读取和写入Excel数据
2022/04/20 Python
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers