javascript - Jquery密码强度检查问题

Question

我有一个 jquery 密码实时验证表单 HERE

示例来自Js Fiddle

此示例指导添加正确的密码。当满足所有要求时，它会变成绿色，并且指南工具提示会隐藏，这非常好。感谢j08691l到目前为止。

但是我面临一个问题，比如满足条件后，工具提示弹出窗口隐藏，当我使用退格键并想要删除时，它不会返回。

这可能吗如果我在隐藏工具提示 Pop 后使用退格键，它会再次出现红色的所有条件都已删除，绿色的条件未删除？

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