脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS密码强度判断

JavaScript判断密码强度(自写代码)

 更新时间：2013年09月06日 16:05:43   作者：  
网站注册的时候经常可以看到密码强度提示，今天自己做了一个JS密码强度判断，具体实现如下，喜欢的朋友可以学习下
在一些网站注册的时候经常可以看到密码强度提示，例如优酷：
 
今天自己做了一个JS密码强度判断，效果如下：
 
以下是代码：
复制代码 代码如下:

<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="" >
<table width="250" border="0" cellpadding=2" bordercolor="#eeeeee" style='display:inline'>
<tr>
<td width="40%" align="right">密码:</td>
<td colspan="3" align="left">
<input type=password size=20 onKeyUp=pwStrength(this.value) onBlur=pwStrength(this.value)>
</td>
</tr>
<tr align="center">
<td width="40%" align="right">密码强度:</td>
<td width="20%" id="strength_L" bgcolor="#f5f5f5">弱</td>
<td width="20%" id="strength_M" bgcolor="#f5f5f5">中</td>
<td width="20%" id="strength_H" bgcolor="#f5f5f5">强</td>
</tr>
</table>
</form>
</body>
</html>
您可能感兴趣的文章:

相关文章

  • 理解Javascript_01_理解内存分配原理分析

    理解Javascript_01_理解内存分配原理分析

    在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，对象模型...,文章的视角很特别，也非常深入，希望大家能接受这种形式，并提供宝贵意见。
    2010-10-10
  • JavaScript时间与时间戳的转换操作实例分析

    JavaScript时间与时间戳的转换操作实例分析

    这篇文章主要介绍了JavaScript时间与时间戳的转换操作,结合实例形式分析了javascript日期与时间戳转换相关函数与操作技巧,需要的朋友可以参考下
    2018-12-12
  • js获取数组对象中的全部key和value值

    js获取数组对象中的全部key和value值

    本文主要介绍了js获取数组对象中的全部key和value值，主要使用JavaScript的 map() 函数和 values() 迭代器来实现取出数组对象的所有key值和value值，感兴趣的可以了解下
    2024-01-01
  • Iframe 自适应高度并实时监控高度变化的js代码

    Iframe 自适应高度并实时监控高度变化的js代码

    不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！
    2009-10-10
  • 用JS获得表格当前行数的代码

    用JS获得表格当前行数的代码

    用JS获得表格当前行数的代码...
    2007-01-01
  • JS防止网页被嵌入iframe框架的方法分析

    JS防止网页被嵌入iframe框架的方法分析

    这篇文章主要介绍了JS防止网页被嵌入iframe框架的方法,结合实例形式分析了针对不同浏览器防止网页被嵌入框架的相关注意事项与操作技巧,需要的朋友可以参考下
    2016-09-09
  • JS图片无缝滚动(简单利于使用)

    JS图片无缝滚动(简单利于使用)

    现在又想做一个无缝滚动了，所以在网上找啊找，好多都是相同的，而且调试复杂，好多都不能动，也懒得去细看，终于让我发现了这个，希望能帮到别人：
    2013-06-06
  • JS实现的跨浏览器解析XML文件实例

    JS实现的跨浏览器解析XML文件实例

    这篇文章主要介绍了JS实现的跨浏览器解析XML文件的方法,结合实例形式分析了javascript基于ActiveXObject操作xml文件的加载与解析相关技巧,需要的朋友可以参考下
    2016-06-06
  • JavaScript判断对象是否为空对象的几种常见方法

    JavaScript判断对象是否为空对象的几种常见方法

    经典面试题,研发时也经常遇见的一个问题,如何判断一个对象是空对象,这篇文章主要给大家介绍了关于JavaScript判断对象是否为空对象的几种常见方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • javascript 代码是如何被压缩的示例代码

    javascript 代码是如何被压缩的示例代码

    这篇文章主要介绍了javascript 代码是如何被压缩的,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05

最新评论