js检测用户输入密码强度


Posted in Javascript onOctober 22, 2015

一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式!

1. 如果输入的密码位数少于5位,那么就判定为弱。
2. 如果输入的密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则判定为弱。
3. 如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则判定为中。
4. 如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则判定为强。
先来看看这个实现的效果吧!

js检测用户输入密码强度

下面是具体利用Javascript检测用户输入密码强度的效果代码。
html部分代码:

<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)"> 
<table border="0" cellpadding="0" cellspacing="0"> 
 <tr align="center"> 
 <td id="pwd_Weak" class="pwd pwd_c"> </td> 
 <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td> 
 <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td> 
 </tr> 
</table>

css部分代码:

.pwd{width:40px;height:20px;line-height:14px;padding-top:2px;} 
.pwd_f{color:#BBBBBB;} 
.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} 
.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} 
.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} 
.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} 
.pwd_c_r{border-right:1px solid #D0D0D0;} 
.pwd_Weak_c_r{border-right:1px solid #BB2B2B;} 
.pwd_Medium_c_r{border-right:1px solid #E9AE10;} 
.pwd_Strong_c_r{border-right:1px solid #267A12;}

使用到的Js函数:

function CheckIntensity(pwd){ 
 var Mcolor,Wcolor,Scolor,Color_Html; 
 var m=0; 
 var Modes=0; 
 for(i=0; i<pwd.length; i++){ 
 var charType=0; 
 var t=pwd.charCodeAt(i); 
 if(t>=48 && t <=57){charType=1;} 
 else if(t>=65 && t <=90){charType=2;} 
 else if(t>=97 && t <=122){charType=4;} 
 else{charType=4;} 
 Modes |= charType; 
 } 
 for(i=0;i<4;i++){ 
 if(Modes & 1){m++;} 
  Modes>>>=1; 
 } 
 if(pwd.length<=4){m=1;} 
 if(pwd.length<=0){m=0;} 
 switch(m){ 
 case 1 : 
  Wcolor="pwd pwd_Weak_c"; 
  Mcolor="pwd pwd_c"; 
  Scolor="pwd pwd_c pwd_c_r"; 
  Color_Html="弱"; 
 break; 
 case 2 : 
  Wcolor="pwd pwd_Medium_c"; 
  Mcolor="pwd pwd_Medium_c"; 
  Scolor="pwd pwd_c pwd_c_r"; 
  Color_Html="中"; 
 break; 
 case 3 : 
  Wcolor="pwd pwd_Strong_c"; 
  Mcolor="pwd pwd_Strong_c"; 
  Scolor="pwd pwd_Strong_c pwd_Strong_c_r"; 
  Color_Html="强"; 
 break; 
 default : 
  Wcolor="pwd pwd_c"; 
  Mcolor="pwd pwd_c pwd_f"; 
  Scolor="pwd pwd_c pwd_c_r"; 
  Color_Html="无"; 
 break; 
 } 
 document.getElementById('pwd_Weak').className=Wcolor; 
 document.getElementById('pwd_Medium').className=Mcolor; 
 document.getElementById('pwd_Strong').className=Scolor; 
 document.getElementById('pwd_Medium').innerHTML=Color_Html; 
}

密码设置的强度对用户信息安全尤为重要,所以大家一定要重视,不仅在开发项目中要时刻注意,还有在平时注册信息的时候也要提高密码的强度,保护个人信息安全,希望这篇文章对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 精粹笔记
May 09 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
AngularJS学习笔记之TodoMVC的分析
Feb 22 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
js事件源window.event.srcElement兼容性写法(详解)
Nov 25 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 #Javascript
实例详解angularjs和ajax的结合使用
Oct 22 #Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 #Javascript
使用jquery插件qrcode生成二维码
Oct 22 #Javascript
JavaScrip调试技巧之断点调试
Oct 22 #Javascript
浅析JavaScript 调试方法和技巧
Oct 22 #Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 #Javascript
You might like
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP比你想象的好得多
2014/11/27 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
js变量提升深入理解
2016/09/16 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年语文教师工作总结
2014/12/18 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript