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的原理和实现技巧介绍
Nov 08 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
Aug 12 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 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
神族 PROTOSS 概述
2020/03/14 星际争霸
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
Django之模型层多表操作的实现
2019/01/08 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
简短证婚人证婚词
2014/01/09 职场文书
环保建议书400字
2014/05/14 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
应届生面试求职信
2014/07/02 职场文书
初婚未育证明样本
2015/06/18 职场文书
《所见》教学反思
2016/02/23 职场文书
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL