3

基本的にパスワード メーターをゼロから作成する必要があり (jquery などの外部フレームワークは使用できません)、2 つの問題があります。

ユーザーが特定の文字を入力したときに、メーターが非常に長くジャンプしない方法を見つけることができないようです。

そして、幅を設定しても、そのメーターが大きくなるのを防ぐことはできません。

<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 内に展開してメーターを作成しています。それだけです。助けてください！前もって感謝します。

4

4 に答える 4

1

計算しているスコアに基づいてメーターの長さを計算する代わりに、いくつかの簡単なバッチ処理を行います。

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

代わりに、それらのバッチスコアにサイズを割り当てます。そうすれば、パスワードがどれほど強力になっても、「難しい」と指定したサイズを超えることはありません。

于 2011-09-20T19:00:30.583 に答える
0

メーターが大きくなりすぎないようにする限り、次のような状態になるのと同じくらい簡単です。

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

そしてそれは基本的にメーターが200pxを超えて成長するのを制限します

于 2011-09-20T18:59:49.520 に答える
0

あなたのコードを動作する jsFiddleに減らしました。最初に整理する必要があると思われるいくつかの奇妙な点がコードに見られます。

まず、同じコードを password.length 回繰り返し実行しているだけなので、このループの理由はないようです。

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

そのループで一度に 1 つずつ、パスワードの各文字を調べるつもりでしたか? もしそうなら、それはあなたのコードが行っていることではありません。

幅に関しては、コンテナーの幅を必要な最大幅に設定し、メーターの幅を 0 から 100 までの親のパーセンテージに設定するのが最も簡単な方法であることをお勧めします。

これがあなたのコードの新しいバージョンです（ここでは jsFiddle で動作しています）、さまざまな方法で改訂されています：

  1. 赤いバーの幅を親のパーセンテージに変更し、上限を 100% に設定して、親の幅を超えないようにしました。
  2. パスワードの各文字を個別に確認する
  3. パスワード バーの幅を 1 回だけ設定する
  4. 入力フィールドの幅に合わせてバーのレイアウトを変更します

新しいバージョンのコードは次のとおりです。

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-20T19:11:05.150 に答える
0

メーターの更新幅が希望する最大幅を超えないことを確認する必要があります。スタイル要素で幅を設定しても、スクリプトはスタイル要素を変更し、最初のスタイル属性によって制限されることなく、必要なだけ 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-20T19:11:57.537 に答える