javascript - パスワード強度関数は1つのvlaueのみを返します

Question

私はJavascriptを初めて使用し、パスワード強度関数を作成しようとしています。ただし、パスワードを入力するたびに、返される値は1つだけです（「非常に強力」）。私は完全に混乱しました!! これが私のコードです：

function pwd_Validation()
    {
        var strength = new Array();
        strength[0] = "Blank";
        strength[1] = "Very Weak";
        strength[2] = "Weak";
        strength[3] = "Medium";
        strength[4] = "Strong";
        strength[5] = "Very Strong";


        var password = document.getElementById('pwd')

        if (password.length < 1)
            var score = 1;


       else if (password.length < 4)
             score = 2


        else if (password.length >= 8 && password.value.match(/[a-z]/))
                 score = 3;


       else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/))
                score = 4;


       else  (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
                score = 5;


        document.getElementById('spnPwd').innerHTML = strength[score];

        if ( password.value = "")
            document.getElementById('spnPwd').innerHTML = strength[0];
            document.getElementById('spnPwd').style.color="#FF0000"

        if ( strength[score] == 1)
            document.getElementById('spnPwd').innerHTML = strength[1];
            document.getElementById('spnPwd').style.color="#FF0000"

        if ( strength[score] == 3)
            document.getElementById('spnPwd').innerHTML = strength[3];
            document.getElementById('spnPwd').style.color="#FFCC00"

        if ( strength[score] == 4)
            document.getElementById('spnPwd').innerHTML = strength[4];
            document.getElementById('spnPwd').style.color="#19D119"

         if ( strength[score] == 5)
            document.getElementById('spnPwd').innerHTML = strength[5];
            document.getElementById('spnPwd').style.color="#006600"

    }

HTMLコード：

Password :   <input type="password" id="pwd" onblur="pwd_Validation()" />
                <span id="spnPwd" class="pwd_Strength" ></span><br />

score 2 · Accepted Answer

if最後から欠落しているので、次のelseように解析されます。

...
else {
    (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
}

score = 5;

制御構造では常に角かっこを使用することをお勧めします。

score 2 · Accepted Answer

いくつかのコーディングエラーとロジックエラーがありました。次の修正/改善を行うこの書き直しをお勧めします。

パスワードDOM要素の長さを使用する代わりに、実際のパスワード値を取得してその長さを使用します。
長さが4〜7の場合（ロジックがスキップされた場合）を処理します
正規表現テストを正しい順序で順序付けて、実際に適切なスコアが見つかるようにします
句読点の正規表現を修正しました
elseロジックの問題を修正
色を並列配列に入れます。
より効率的/コンパクトな方法で強度文字列を宣言します。
スコアにデフォルト値を付けて、値が保証されるようにします。
正規表現テストを2回以上繰り返さないでください
一致するかどうかだけを知りたい場合regex.testよりも効率的であるため、使用してくださいregex.match
ifすべてのスコアのステートメントではなく、配列から目的の色の値を引き出します
spnPwdDOM要素を1回だけフェッチします
数値正規表現をに変更しました\d
安全のために、すべてのif/elseステートメントに中括弧を使用してください

そして提案されたコード：

function pwd_Validation() {
    var strengths = ["Blank", "Very Weak", "Weak", "Medium", "Strong", "Very Strong"];
    var colors = ["#FF0000", "#FF0000", "#FFCC00", "#FFCC00", "#19D119", "#006600"];
    var score = 0;
    var regLower = /[a-z]/, regUpper = /[A-Z]/, regNumber = /\d/, regPunctuation = /[.,!@#$%^&*?_~\-£()]/;

    var password = document.getElementById('pwd').value;
    if (!password) {
        score = 0;
    } else if (password.length < 2) {
        score = 1;
    } else if (password.length < 4) {
        score = 2;
    } else if (password.length <= 7) {
        score = 3;
    } else {
        // length is >= 8 in here
        if (regLower.test(password) && regUpper.test(password) && regNumber.test(password)) {
            // if it also has punctuation, then it gets a 5, otherwise just a 4
            if (regPunctuation.test(password)) {
                score = 5;
            } else {
                score = 4;
            }
        } else {
            // if doesn't have upper, lower and numbers, then it gets a 3
            score = 3;
        }
    }
    var spanPwd = document.getElementById('spnPwd');
    spanPwd.innerHTML = strengths[score];
    spanPwd.style.color = colors[score];
}

score 0 · Accepted Answer

パスワードフィールドをその値に変換するのを忘れました：

var password = document.getElementById('pwd')

var password = document.getElementById（'pwd'）。valueである必要があります

元のケースでは、password.lengthは未定義であり、それとのすべての比較はfalseと評価されます。（つまり、ファイナルelseが実行されます）

また、最後のelseブロック

   else  (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
            score = 5;

する必要があります

   else  if(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
            score = 5;

それとは別に、ifには中かっこを使用してください。次のようなコードを使用することはお勧めできません。

if(...)
 ...
else if(...)
 ...
else
 ...

これの方が良い：

if(...){
 ...
}else if(...){
 ...
}else{
 ...
}

score 0 · Accepted Answer

私はあなたのコードをjsbeautifier.orgにプッシュしました。これにより、JavaScriptインタープリターが実際にコードを実行する方法に従って、コードが再インデントされました。ifステートメントがあなたが思っているコードを実行していないことに注意してください。

function pwd_Validation() {
    var strength = new Array();
    strength[0] = "Blank";
    strength[1] = "Very Weak";
    strength[2] = "Weak";
    strength[3] = "Medium";
    strength[4] = "Strong";
    strength[5] = "Very Strong";

    var password = document.getElementById('pwd')

    if (password.length < 1) var score = 1;
    else if (password.length < 4) score = 2
    else if (password.length >= 8 && password.value.match(/[a-z]/)) score = 3;
    else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/)) score = 4;
    else(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
    score = 5;

    document.getElementById('spnPwd').innerHTML = strength[score];

    if (password.value = "") document.getElementById('spnPwd').innerHTML = strength[0];
    document.getElementById('spnPwd').style.color = "#FF0000"

    if (strength[score] == 1) document.getElementById('spnPwd').innerHTML = strength[1];
    document.getElementById('spnPwd').style.color = "#FF0000"

    if (strength[score] == 3) document.getElementById('spnPwd').innerHTML = strength[3];
    document.getElementById('spnPwd').style.color = "#FFCC00"

    if (strength[score] == 4) document.getElementById('spnPwd').innerHTML = strength[4];
    document.getElementById('spnPwd').style.color = "#19D119"

    if (strength[score] == 5) document.getElementById('spnPwd').innerHTML = strength[5];
    document.getElementById('spnPwd').style.color = "#006600"    
}

いくつかの特定の例を取り出すには：

if (strength[score] == 5) document.getElementById('spnPwd').innerHTML = strength[5];
document.getElementById('spnPwd').style.color = "#006600"

おそらくあなたはこれを次のように意図していました：

if (strength[score] == 5) {
    document.getElementById('spnPwd').innerHTML = strength[5];
    document.getElementById('spnPwd').style.color = "#006600"
}

また：

else(password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/))
score = 5;

あなたはおそらく意味しました：

else if (password.length >= 8 && password.value.match(/[a-z]/) && password.value.match(/[A-Z]/) && password.value.match(/[0-9]/) && password.value.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,£,(,)]/)) {
    score = 5;
}

あなたがあなたのコードで言及する実際の問題は、私が引き出した2番目の条件によるものです。この行score = 5は条件付きではなく、常に実行されます（上記の理由により）。これが、パスワードが「非常に強力」であることを常に確認している理由です。

score 0 · Accepted Answer

varスコアに保存してから、strength[score]を尋ねます。 if (strength[score] == 3)

次に、コードの2番目の部分にいくつかの{}がありません。

最後の部分で使用できます

switch(score) {
 case 1: ... break;

...
 default: ... break;
}

javascript - パスワード強度関数は1つのvlaueのみを返します

5 に答える 5

Related

Reference