Пароль Надежность

Question

Я должен сделать счетчик паролей с нуля (не могу использовать внешние фреймворки, такие как 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, чтобы сделать метр, и это все. Пожалуйста помоги! Заранее спасибо.

Answer 1

Вместо того, чтобы основывать длину счетчика на счету, который вы вычисляете, сделайте несколько простых дозировок:

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

и вместо этого назначьте размеры для этих пакетных результатов.Таким образом, независимо от того, насколько сильным будет пароль, он никогда не превысит размер, который вы указали как «трудный».

Answer 2

Вы должны убедиться, что ширина обновления индикатора не превысит вашу максимальную желаемую ширину.Даже если вы задаете ширину в элементе style, ваш скрипт изменяет элемент style, и div может увеличиваться настолько широко, насколько ему нужно, без ограничения этим начальным атрибутом style.Вы можете добавить чек, например

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

}

Добавьте это после ваших обновлений, и если персонаж когда-либо устанавливает стиль шире, чем вы хотите, вы можете вернуть его на максимальную желаемую ширину.

Answer 3

Я сократил ваш код до работающего jsFiddle .В коде я вижу несколько прикольных вещей, которые, возможно, сначала нужно разобраться.

Во-первых, кажется, что для этого цикла нет причин, поскольку все, что он делает, это снова и снова запускает один и тот же код с паролем.длина раз:

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

Вы хотели проверить каждый символ в пароле, по одному в этом цикле?Если это так, то это не то, что делает ваш код.

Что касается ширины, я бы предложил, что самый простой способ - установить ширину контейнера равной максимальной ширине, которую вы хотите, а затем установить ширинуметра в процентах от родительского значения от 0 до 100.

Вот новая версия вашего кода (, работающая здесь в jsFiddle ), пересмотренная множеством способов:

1. Изменил ширину красной полосы на процент от ее родительского элемента и ограничил ее на 100%, чтобы она никогда не выходила за пределы родительской ширины.
2. Проверьте каждый символ в пароле отдельно
3. Установите ширину панели паролей только один раз
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";
    }
}

Очевидно, вы можете настроить вес по своему усмотрению.

Answer 4

Что касается предотвращения слишком большого роста счетчика, это так же просто, как наличие условия, подобного:

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

И это в основном ограничит рост счетчика выше 200px