Question

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

的示例

此示例指导添加正确的密码。当满足所有要求时，它变为绿色，并且导向工具提示隐藏了非常好。感谢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

Answer 2

你可以在输入标签里面使用range属性而且你会节省大量的时间和额外的编码。

Jquery密码强度检查器问题

2 个答案: