密码强度测量仪

我必须从头开始制作密码表（基本上不能使用jquery之类的外部框架），而且我有两个问题。密码强度测量仪

我似乎无法找到一种方式，当用户输入某个字符时，它不会跳到很大的长度。

而且即使通过设置宽度，我也无法防止仪表变大。

<input type="password" id="newPass" style="width:206px" onkeyup="strengthMeter()"/><br/><br/> 
       <div style="width:100px;display:inline;"><div id="meter" style="background-color:red;width:10px;height:10px;"></div> 
        <span>Strength</span><span id="strength" style="float:right">Weak</span> 
       </div> 

function strengthMeter(){ 


    var password = $("newPass").value; 
    var numEx = /\d/; 
    var lcEx = new RegExp("[a-z]"); 
    var ucEx = new RegExp("[A-Z]"); 
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\']; 
    var meterMult = 1; 

    for(var k = 0; k < password.length; k++){ 
     if(numEx.test(password)){ 
      meterMult += 0.75; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     if(ucEx.test(password)){ 
      meterMult += 1; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     if(lcEx.test(password)){ 
      meterMult += 0.25; 
      $("meter").style.width = " " + (10*meterMult) + "px"; 
     } 

     for(var i = 0; i < symbols.length; i++){ 
      if(password.indexOf(symbols[i]) >= 0){ 
       meterMult += 1; 
       $("meter").style.width = " " + (10*meterMult) + "px"; 
      } 
      } 
     if(meterMult >= 12){ 
      $("strength").innerHTML = "Strong"; 
      } 
     else if(k >= 6){ 
      $("strength").innerHTML = "Medium"; 
     } 
     else 
      $("strength").innerHTML = "Weak"; 
     } 

    }

上面有我用来制作仪表的div。基本上，我正在考虑一个div，并在另一个div中扩展它来制作计量表，就是这样。请帮忙！提前致谢。

来源

2011-09-20 banjokaboom

我们真的使用正确的算法吗？ http://xkcd.com/936/ –

密码强度测量的替代方法：http://stackoverflow.com/questions/948172/password-strength-meter/11268104#11268104 –

我已将您的代码缩减为working jsFiddle。我在代码中看到一些时髦的东西，可能需要首先将它们整理出来。

首先，似乎没有理由循环所有它做的是在运行相同的代码，一遍又一遍password.length时间：

for(var k = 0; k < password.length; k++){

您的意思是要检查的每个字符密码，在那个循环中一次一个？如果是这样，那不是你的代码在做什么。

至于宽度，我建议最简单的方法是将容器的宽度设置为所需的最大宽度，然后将仪表的宽度设置为父级的从0到100的百分比。

这里是你的代码（working here in a jsFiddle），在一堆的方式修订的新版本：

改变了红条的宽度它的比例是父母和封顶于100％，因此它会永远不要超出父宽度。
入住密码的每个字符单独
设置密码栏的宽度只有一次
更改栏的布局以匹配输入字段

这里的宽度是从代码新版本：

function strengthMeter() { 
    var password = $("newPass").value; 
    var numEx = /\d/; 
    var lcEx = /[a-z]/; 
    var ucEx = /[A-Z]/; 
    var symbols = ['/', '@', '#', '%', '&', '.', '!', '*', '+', '?', '|','(', ')', '[', ']', '{', '}', '\\']; 
    var meterMult = 1; 

    for (var k = 0; k < password.length; k++) { 
     var pchar = password.charAt(k); 
     if(numEx.test(pchar)){ 
      meterMult += 0.75; 
     } 

     if(ucEx.test(pchar)){ 
      meterMult += 1; 
     } 

     if(lcEx.test(pchar)){ 
      meterMult += 0.25; 
     } 
    } 

    for (var i = 0; i < symbols.length; i++) { 
     if(password.indexOf(symbols[i]) >= 0) { 
      meterMult += 1; 
     } 
    } 

    // assume that 100% is a meterMult of 15 
    var fullStrength = 15; 
    $("meter").style.width = ((Math.min(fullStrength, meterMult)/fullStrength)*100) + "%"; 

    if(meterMult >= 12) { 
     $("strength").innerHTML = "Strong"; 
    } 
    else if(password.length >= 6) { 
     $("strength").innerHTML = "Medium"; 
    } 
    else { 
     $("strength").innerHTML = "Weak"; 
    } 
}

很明显，您可能想要根据需要调整权重。

来源

2011-09-20 19:11:05 jfriend00

至于防止电表从得到增长太多，它具有像一个条件一样容易：

$("meter").style.width = " " + (10*meterMult>200?200:10*meterMult) + "px";

它将基本上限制计增长近200像素

来源

2011-09-20 18:59:49 Icarus

相反立足米的长度过你在计算分数的，做一些简单的配料：

if (score < 10) { 
    size = weak 
} else if (score < 30) { 
    size = medium 
} else { 
    size = hard 
}

，并指定尺寸那些批量的分数来代替。这样，无论密码有多强大，它都不会超过您指定的“难度”的任何大小。

来源

2011-09-20 19:00:30

您需要检查仪表的更新宽度不会超过您的最大所需宽度。即使您在样式元素中设置了宽度，脚本也会更改样式元素，并且div可以随意扩展，而不受初始样式属性的限制。您可以添加一个检查像

var n = $("meter").style.width; 
if(n>someValue) 
{ 
    //set the meter to the MAX width that you want 
    $("meter").style.width=100; 

}

您的更新后添加这一点，如果一个字符集永远比你想要的风格更广泛，你可以把它恢复到所需的最大宽度。

来源

2011-09-20 19:11:57 Rondel

密码强度测量仪

回答

相关问题