Question

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

此示例指导添加正确的密码并显示红色和绿色标志。

但我想要的是，当所有密码条件成功时，弹出工具提示会自动消失。

这怎么可能。我不擅长jquery，任何帮助将不胜感激。

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');
            }   


    });
    $('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();

<强> jsFiddle example

Answer 2

这将在你的keyup（）函数中起作用：

if(pswd.length >= 8 && pswd.match(/[A-z]/) && pswd.match(/\d/)) {
    $('#pswd_info').hide();
}

更新了JSFiddle

Answer 3

这是一个工作版本（jsfiddle）：

$(document).ready(function() {


    $('input[type=password]').keyup(function() {
        var isValid = true;

        // set password variable
        var pswd = $(this).val();
        if ( pswd.length < 8 ) {
                        isValid &= false;
                        $('#length').removeClass('valid').addClass('invalid');
            } else {
                        isValid &= true;
                        $('#length').removeClass('invalid').addClass('valid');
            }


                    //validate letter
            if ( pswd.match(/[A-z]/) ) {
                        isValid &= true;
                        $('#letter').removeClass('invalid').addClass('valid');
            } else {
                isValid &= false;
                        $('#letter').removeClass('valid').addClass('invalid');
            }

            //validate capital letter
            if ( pswd.match(/[A-Z]/) ) {
                         isValid &= true;
                         $('#capital').removeClass('invalid').addClass('valid');
            } else {
                         isValid &= false; 
                         $('#capital').removeClass('valid').addClass('invalid');
            }

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

                    if(isValid){
                        $('#pswd_info').hide();
                    }

    });
    $('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();
    });


});

完成所有条件后隐藏工具提示弹出窗口

3 个答案: