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中暂停功能的实现代码
Mar 04 Javascript
JS敏感词过滤代码
Dec 23 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
浅析vue中的nextTick
Dec 28 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
nginx 设置多个站跨域
2021/03/09 Servers
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery操作对象数组元素方法详解
2014/11/26 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
Python切片用法实例教程
2014/09/08 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python中断多重循环的思路总结
2019/10/04 Python
Pytorch转tflite方式
2020/05/25 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
介绍一下XMLHttpRequest对象
2012/02/12 面试题
路政管理毕业自荐书范文
2014/02/10 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
反对邪教标语
2014/06/30 职场文书
医院党建工作总结2015
2015/05/26 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
Mysql中常用的join连接方式
2022/05/11 MySQL