js怎么实现密码的强弱? 我看到很多网站都会根据你输入的密码来判断强弱..我昨天用onchange事件试了一下 结果不行.有谁知道怎么做的? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 //密码强度;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 = "300px"; this.height = "16px"; this.content = ""; this.selectedIndex = 0; this.init(); }PasswordStrength.prototype.init = function(){ var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">'; s += '<tr>'; for(var i=0;i<3;i++){ s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px"> </span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>'; } s += '</tr>'; s += '</table>'; 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;i<id;i++){ this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style); } for(;i<3;i++){ this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style); }}PasswordStrength.prototype.$ = function(s){ return document.getElementById(s);}PasswordStrength.prototype.setSize = function(w,h){ document.getElementById(this.divName+"_table").style.width = w; document.getElementById(this.divName+"_table").style.height = h; //this.width = w; //this.height = h;}PasswordStrength.prototype.setMinLength = function(n){ if(isNaN(n)){ return ; } n = Number(n); if(n>1){ this.minLength = n; }}PasswordStrength.prototype.setStyles = function(){ if(arguments.length == 0){ return ; } for(var i=0;i<arguments.length && i < 4;i++){ this.styles[i] = arguments[i]; } this.copyToStyle(this.selectedIndex);}PasswordStrength.prototype.write = function(s){ if(this.showed){ return ; } var n = (s == 'string') ? this.$(s) : s; if(typeof(n) != "object"){ return ; } n.innerHTML = this.content; this.copyToStyle(this.selectedIndex);}PasswordStrength.prototype.update = function(s){ if(s.length < this.minLen){ this.copyToStyle(0); return; } var ls = -1; if (s.match(/[a-z]/ig)){ ls++; } if (s.match(/[0-9]/ig)){ ls++; } if (s.match(/(.[^a-z0-9])/ig)){ ls++; } if (s.length < 6 && ls > 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); }}//onkeyup中调用<input id="pwd" runat="server" onkeyup="ps.update(this.value);" type="password"/>具体的,楼主自己研究 呵呵,刚把以前项目用的分离出来<html> <head> <script type="text/javascript">function checkstr(str){ if(str>=48&&str<=57)//数字 { return 1; } else if(str>=65&&str<=90)//大写字母 { return 2; } else if(str>=97&&str<=122)//小写字母 { return 3; } else//特殊字符 { return 4; }}function checkl(string){ n=false; s=false; t=false; l_num=0; if(string.length<6) { l_num=1; } else { for(i=0;i<string.length;i++) { asc=checkstr(string.charCodeAt(i)); if(asc==1&&n==false){l_num+=1;n=true;} if((asc==2||asc==3)&&s==false){l_num+=1;s=true;} if(asc==4&&t==false){l_num+=1;t=true;} } } return l_num;}function checklevel(psw){if(psw!=""){ document.getElementById("pwdisok").style.display="block";}else{document.getElementById("pwdisok").style.display="none";} color="#ededed"; color_l="#ff0000"; color_m="#ff9900"; color_h="#33cc00"; if(psw==null||psw=='') { lcor=color; mcor=color; hcor=color; } else { thelev=checkl(psw) switch(thelev) { case 1: lcor=color_l; hcor=mcor=color; break; case 2: mcor=lcor=color_m; hcor=color; break; case 3: hcor=mcor=lcor=color_h; break; default: lcor=mcor=hcor=color; } } document.getElementById("pwd_small").style.background=lcor; document.getElementById("pwd_center").style.background=mcor; document.getElementById("pwd_ok").style.background=hcor;} function checksubmit(){ if(document.getElementById("pwd_small").style.background=="#ff0000"){ alert("你的密码强度太弱,建议你用字母、数字、下划线、特殊字符组合密码!"); } }</script> </head> <body> <div id="qqpwd"> 设置密码 : <input type="password" onKeyUp="checklevel(this.value)" onBlur="checklevel(this.value)"> </div> <div id="pwdisok" style="display: none;width:330px;"> <!-- 密码强弱判断 --> <span id="pwd_small" style="width:100px;text-align:center;">弱</span> <span id="pwd_center" style="width:100px;text-align:center;">中</span> <span id="pwd_ok" style="width:100px;text-align:center;">强</span> </div> <br> <input type="button" value="提交" onclick="checksubmit()" /> </body> 试试这个<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="20" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" /> <br>密码强度:<table width="200px" height="25" border="0" cellspacing="0" cellpadding="1" bordercolor="#cccccc" style='font-size:12px'><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> ls的思路都不错,可以利用正则判断密码强度css+js控制显示强度系数即可 http://topic.csdn.net/u/20070424/13/6bdee50a-cad6-455b-a6ec-653d025baa43.html翻老帖,当年其中10楼的回复曾经让俺佩服不已,只用1条正则就把密码分了4个等级。 如何控制realplay 快进 后退 在线编辑器在iframe页面中无法框选内容 时间转换问题 一个使用javascript调用activex函数的问题。 如何消除弹出对话框的“X”号 如何在网页上显示WEB服务器的hostname? 如何根据IE禁止了Javascript脚本的设置,在程序运行时来提示客户呢? 正则表达式匹配问题..... 怎样在提交表单后清空内容? Javascript的切取函数! 如何实现在点击窗口右上角的小叉号关闭窗口前弹出另一个窗口呢 如何用js调用web服务 急急急!!! 在线等!
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 = "300px";
this.height = "16px";
this.content = "";
this.selectedIndex = 0;
this.init();
}
PasswordStrength.prototype.init = function(){
var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">';
s += '<tr>';
for(var i=0;i<3;i++){
s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px"> </span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>';
}
s += '</tr>';
s += '</table>';
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;i<id;i++){
this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);
}
for(;i<3;i++){
this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style);
}
}
PasswordStrength.prototype.$ = function(s){
return document.getElementById(s);
}
PasswordStrength.prototype.setSize = function(w,h){
document.getElementById(this.divName+"_table").style.width = w;
document.getElementById(this.divName+"_table").style.height = h;
//this.width = w;
//this.height = h;
}
PasswordStrength.prototype.setMinLength = function(n){
if(isNaN(n)){
return ;
}
n = Number(n);
if(n>1){
this.minLength = n;
}
}
PasswordStrength.prototype.setStyles = function(){
if(arguments.length == 0){
return ;
}
for(var i=0;i<arguments.length && i < 4;i++){
this.styles[i] = arguments[i];
}
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.write = function(s){
if(this.showed){
return ;
}
var n = (s == 'string') ? this.$(s) : s;
if(typeof(n) != "object"){
return ;
}
n.innerHTML = this.content;
this.copyToStyle(this.selectedIndex);
}
PasswordStrength.prototype.update = function(s){
if(s.length < this.minLen){
this.copyToStyle(0);
return;
}
var ls = -1;
if (s.match(/[a-z]/ig)){
ls++;
}
if (s.match(/[0-9]/ig)){
ls++;
}
if (s.match(/(.[^a-z0-9])/ig)){
ls++;
}
if (s.length < 6 && ls > 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);
}
}
//onkeyup中调用
<input id="pwd" runat="server" onkeyup="ps.update(this.value);" type="password"/>具体的,楼主自己研究
<html>
<head>
<script type="text/javascript">
function checkstr(str)
{
if(str>=48&&str<=57)//数字
{
return 1;
}
else if(str>=65&&str<=90)//大写字母
{
return 2;
}
else if(str>=97&&str<=122)//小写字母
{
return 3;
}
else//特殊字符
{
return 4;
}
}
function checkl(string)
{
n=false;
s=false;
t=false;
l_num=0;
if(string.length<6)
{
l_num=1;
}
else
{
for(i=0;i<string.length;i++)
{
asc=checkstr(string.charCodeAt(i));
if(asc==1&&n==false){l_num+=1;n=true;}
if((asc==2||asc==3)&&s==false){l_num+=1;s=true;}
if(asc==4&&t==false){l_num+=1;t=true;}
}
}
return l_num;
}function checklevel(psw)
{
if(psw!=""){
document.getElementById("pwdisok").style.display="block";
}else{
document.getElementById("pwdisok").style.display="none";
}
color="#ededed";
color_l="#ff0000";
color_m="#ff9900";
color_h="#33cc00";
if(psw==null||psw=='')
{
lcor=color;
mcor=color;
hcor=color;
}
else
{
thelev=checkl(psw)
switch(thelev)
{
case 1:
lcor=color_l;
hcor=mcor=color;
break;
case 2:
mcor=lcor=color_m;
hcor=color;
break;
case 3:
hcor=mcor=lcor=color_h;
break;
default:
lcor=mcor=hcor=color;
}
}
document.getElementById("pwd_small").style.background=lcor;
document.getElementById("pwd_center").style.background=mcor;
document.getElementById("pwd_ok").style.background=hcor;
}
function checksubmit(){
if(document.getElementById("pwd_small").style.background=="#ff0000"){
alert("你的密码强度太弱,建议你用字母、数字、下划线、特殊字符组合密码!");
}
}
</script>
</head>
<body>
<div id="qqpwd">
设置密码 :
<input type="password"
onKeyUp="checklevel(this.value)" onBlur="checklevel(this.value)">
</div> <div id="pwdisok" style="display: none;width:330px;">
<!-- 密码强弱判断 -->
<span id="pwd_small" style="width:100px;text-align:center;">弱</span>
<span id="pwd_center" style="width:100px;text-align:center;">中</span>
<span id="pwd_ok" style="width:100px;text-align:center;">强</span>
</div>
<br>
<input type="button" value="提交" onclick="checksubmit()" />
</body>
//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="20" onKeyUp="pwStrength(this.value)" onBlur="pwStrength(this.value)" />
<br>密码强度:
<table width="200px" height="25" border="0" cellspacing="0" cellpadding="1" bordercolor="#cccccc" style='font-size:12px'>
<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>
css+js控制显示强度系数即可
翻老帖,当年其中10楼的回复曾经让俺佩服不已,只用1条正则就把密码分了4个等级。