A-A+

js密码强度检测

2013年09月21日 前端设计 评论 9 条 阅读 223 views 次

在许多网站上面我们已经遇到过,当注册用户时,检测js密码的强度,如果你输入的密码较简单,那么就会提示密码强度很弱,如果你输入得非常复杂,就会提示密码强度为高,其实这样的功能无非就是利用js来进行密码强度的检测,然后实时显示检测结果,下面是一个js密码强度检测的文件,需要在使用时进行调用和实例化,下面看一下文件和使用方法:

文本框显示:

[cc lang="html"]


PasswordStrength



密码强度检测

强度显示:
密码检测:



[/code]

JS检测密码强度文件:

[cc lang="javascript"]
//密码强度;
function PasswordStrength(showed){
this.showed = (typeof(showed) == "boolean")?showed:true;
this.styles = new Array();
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};

this.labels= ["弱","中","强"];

this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);
this.minLen = 5;

this.width = "150px";
this.height = "16px";

this.content = "";

this.selectedIndex = 0;

this.init();
}
PasswordStrength.prototype.init = function(){
var s = '

';
s += '
';
for(var i=0;i<3;i++){ s += '

';
}
s += '

';
s += '

';
this.content = s;
if(this.showed){
document.write(s);
this.copyToStyle(this.selectedIndex);
}
}
PasswordStrength.prototype.copyToObject = function(o1,o2){
for(var i in o1){
o2[i] = o1[i];
}
}
PasswordStrength.prototype.copyToStyle = function(id){
this.selectedIndex = id;
for(var i=0;i<3;i++){ if(i == id-1){ this.$(this.divName+"_label_"+i).style.display = "inline"; }else{ this.$(this.divName+"_label_"+i).style.display = "none"; } } for(var i=0;i1){
this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function(){
if(arguments.length == 0){
return ;
}
for(var i=0;i 0){
ls--;
}
switch(ls) {
case 0:
this.copyToStyle(1);
break;
case 1:
this.copyToStyle(2);
break;
case 2:
this.copyToStyle(3);
break;
default:
this.copyToStyle(0);
}
}
[/code]

使用方法,将其复制到网页中即可。效果图如下:

标签:

9 条留言  访客:9 条  博主:0 条

  1. 爱浮夸

    用这东西干啥,感觉没实际用处。

  2. 面子至上

    好实用的功能不错~

  3. 免费部落

    我一般不用这样的JS

  4. 海棠果

    高强度密码吧

  5. 哥特复兴

    很久没来了,来新站看看。。以前也用过这个主题

  6. 社新社

    使用这个代码就可以降低服务器的负载了。

  7. 海涛

    哇卡卡,帅气的代码

  8. 21氪

    密码强度还能检测,

  9. 哈啦

    这个功能好多网站都有呢,觉得挺有意思的

给我留言