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 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
js实现星星海特效的示例
Sep 28 Javascript
实例详解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
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
Use Word to Search for Files
2007/06/15 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
前端Electron新手入门教程详解
2019/06/21 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
flask框架路由常用定义方式总结
2019/07/23 Python
python 实现图片批量压缩的示例
2020/12/18 Python
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
综合实践教学反思
2014/01/31 职场文书
优秀家长事迹材料
2014/05/17 职场文书
工程安全生产协议书
2014/11/21 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
Java完整实现记事本代码
2022/06/16 Java/Android