密码已经是我们生活工作中必不可少的工具,但一个不安全的密码有又有可能会给我们造成不必要的损失。作为网站设计者,如果我们在网页中能对用户输入的密码
进行安全评估,并显示出相应的提示信息,那么对用户设置一个安全的密码将有很大帮助。同时也使得网站更具人性化,更有吸引力.
什么是一个安全的密码呢?本程序按以下的方式进行评估.
1.如果密码少于5位,那么就认为这是一个弱密码.
2.如果密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码.
3.如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码.
4.如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码.
本程序将根据用户输入的密码分别显示不同的颜色表示密码的强度,具体程序如下:
以下是引用片段:
<script
language=javascript>
//CharMode函数
//测试某个字符是属于哪一类.
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;
}
//checkStrong函数
//返回密码的强度级别
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);
}
//pwStrength函数
//当用户放开键盘或密码输入框失去焦点时,根据不同的级别显示不同的颜色
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>
<form
name=form1 action="" >
输入密码:<input type=password size=10
onKeyUp=pwStrength(this.value)
onBlur=pwStrength(this.value)>
<br>密码强度:
<table
width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
height="23" style='display:inline'>
<tr align="center"
bgcolor="#eeeeee">
<td width="33%"
id="strength_L">弱</td>
<td width="33%"
id="strength_M">中</td>
<td width="33%"
id="strength_H">强</td>
</tr>
</table>
</form>
相关推荐
很好很实用的JavaScript实现密码强度验证 实用方便 容易上手 说明:1、由于没有具体说明要用什么强度规则,所以使用了自己定义的一个规则(认为不合理的地方可以自己更改,很方便) 2、密码框输入内容分三种类型:数字...
一个非常好用的js密码强度验证 一看即会~~!
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
JavaScript简单的密码强度验证,欢迎使用!
一个非常好用的js密码强度验证 一看就会
jQuery制作密码强度验证插件 演示地址:http://www.xwcms.net/js/bddm/90634.html
js正则验证密码6~20位强度;分为3中级别(底、中、高);当输入数字、大写字母、小写字母其中一种时密码强度为底;当有其中两种时为中;三种都有的时就是高
用心自己整理的代码,对于js和java代码对密码强度做验证
js判断密码的强度,给出强弱返回值,下载后,保存格式为html格式即可。
javascript实现前端input密码输入强度验证.docx
主要为大家详细介绍了原生js实现密码强度验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
网页模板——vue.js实现适用于手机端注册表单输入密码强度验证功能源码
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
vue.js表单输入框密码强度验证代码是一款适用于电脑跟手机注册表单输入密码强度验证特效。
jsp密码强度检测jsp密码强度检测jsp密码强度检测
vue.js适用于手机注册表单输入密码强度验证
jquery.validate表单验证密码完整例子(带密码强度显示)