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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
vue组件学习教程
Sep 09 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
使用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中循环语句的用法介绍
2012/01/30 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php去掉文件前几行的方法
2015/07/29 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
react antd表格中渲染一张或多张图片的实例
2020/10/28 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python类如何定义私有变量
2020/02/03 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
西班牙在线光学:Visual-Click
2020/06/22 全球购物
为什么会有内存对齐
2016/10/10 面试题
.net面试题
2015/12/22 面试题
linux面试题参考答案(6)
2014/08/29 面试题
幼师自我鉴定
2014/02/01 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
2015年团支书工作总结
2015/04/03 职场文书