jQuery密碼強度檢查器問題

Question

我有一個jquery密碼驗證直播形式HERE

Js Fiddle的例子

本示例指導添加正確的密碼。 當滿足所有要求時，它會變成綠色，並且“工具提示”隱藏指南非常好。 感謝j08691l的幫助。

但是我遇到了一個問題，例如在滿足條件時，當工具提示彈出窗口隱藏起來時，當我使用退格鍵並要刪除時，它不會再出現。

如果我在隱藏工具提示“彈出”之后使用退格鍵，並且該條件再次以所有已刪除的紅色和未刪除的綠色顯示，那么是否有可能？

JS：

$(document).ready(function () {
    $('input[type=password]').keyup(function () {
        // set password variable
        var pswd = $(this).val();
        if (pswd.length < 8) {
            $('#length').removeClass('valid').addClass('invalid');
        } else {
            $('#length').removeClass('invalid').addClass('valid');
        }
        //validate letter
        if (pswd.match(/[A-z]/)) {
            $('#letter').removeClass('invalid').addClass('valid');
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
        }
        //validate capital letter
        if (pswd.match(/[A-Z]/)) {
            $('#capital').removeClass('invalid').addClass('valid');
        } else {
            $('#capital').removeClass('valid').addClass('invalid');
        }

        //validate number
        if (pswd.match(/\d/)) {
            $('#number').removeClass('invalid').addClass('valid');
        } else {
            $('#number').removeClass('valid').addClass('invalid');
        }

        if ($('#pswd_info li.valid').length == 4) $('#pswd_info').fadeOut();
    });
    $('input[type=password]').focus(function () {
        // focus code here
    });
    $('input[type=password]').blur(function () {
        // blur code here
    });

    $('input[type=password]').keyup(function () {

        // keyup code here
    }).focus(function () {
        $('#pswd_info').show();
    }).blur(function () {
        $('#pswd_info').hide();
    });


}); 

Answer 1

你需要：

    if ($('#pswd_info li.valid').length == 4) {
        $('#pswd_info').fadeOut();
    } else {
        $('#pswd_info').fadeIn();
    }

如果您不滿足驗證條件，則永遠不會褪色信息。

實際上，我建議反轉條件，因此您無需對條件數進行硬編碼：

    if ($('#pswd_info li.invalid').length == 0) {
        $('#pswd_info').fadeOut();
    } else {
        $('#pswd_info').fadeIn();
    }

DEMO

Answer 2

您可以只使用輸入標簽內的range屬性，例如And，您可以節省大量時間和額外的編碼。