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 12 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
js拖拽一些常见的思路方法整理
Mar 19 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
javascript控制台详解
2015/06/25 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
深入理解js promise chain
2016/05/05 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
微信运维交互机器人的示例代码
2018/11/12 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
简单使用Python自动生成文章
2014/12/25 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
python实现图书借阅系统
2019/02/20 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
python 基于opencv实现高斯平滑
2020/12/18 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
环保标语口号
2014/06/13 职场文书
创建文明城市倡议书
2015/04/28 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
解决numpy和torch数据类型转化的问题
2021/05/23 Python
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python