0

我知道这在这里经常是一个问题，但我不认为它与设计模式特别相关，而是更多地因为我的愚蠢。

可能有一个非常简单的解决方案，但我很累，它开始让我有点。我已经在控制台中触发了它，它会做出相应的响应，但是当我在输入中输入任何内容时，它没有响应。

这是JS

$(document).ready(function(){
var passwordStrength = function (element){
    var password = element.val();
    var strength = [ 'Very Weak', 'Weak', 'Better', 'Strong', 'Very Strong' ];
    var score   = 0;
    // > 6
    if (password.length > 6){ 
        score+=1;
    }
    //has lower and uppercase     
    if ((password.match(/[a-z]/) ) && (password.match(/[A-Z]/))){
        score+=1;
    }
    //has number
    if (password.match(/\d+/)){
        score+=1;
    }
    //has special character
    if (password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){
        score+=1;
    }
    //more than 12 characters
    if (password.length > 12){
        score+=1;
    }

    $('#pwdstrtxt').text(strength[score]);
    $('#pwdstrtxt').addClass('pwdText'+score);
    $('#pwdStrFill').addClass('pwdScore'+score);
}

passwordStrength($('#pass'));

});

这是一个JSFiddle

理想情况下，我希望加载栏和文本根据输入动态变化。

任何帮助将不胜感激:) 谢谢。

4

4 回答 4

6

每次修改输入时都必须调用事件，如下所示：

$("#pass").on("keyup change", function() {
    passwordStrength($(this));
})

我已经更新了你的jsFiddle

于 2013-08-13T10:55:17.913 回答
0

首先，您需要确保在用户键入内容时执行您的代码。这是通过绑定到文本字段上的 keydown 事件来完成的。

$(document).ready(function() {
    $('#pass').on('keydown change', function() { passwordStrength($('#pass'));});;
});

然后，您还应该确保在添加新的类之前删除您设置的类，以允许用户在改变主意时重新输入密码。

$('#pwdstrtxt').removeClass();
$('#pwdStrFill').removeClass();

我更新了你的小提琴以反映这些变化：http: //jsfiddle.net/UGDLb/12/

于 2013-08-13T11:05:33.227 回答
0

我认为您可以使用它，它也易于使用... Jquery 验证插件

于 2013-08-13T10:58:05.210 回答
0

您需要在 keyup 上添加一个事件侦听器。

$('#pass').on('keyup', function () {passwordStrength($(this))});

您还需要使用正确更新密码栏

$('#pwdStrFill').attr('class', 'pwdScore' + score);

JSFiddle

于 2013-08-13T10:57:20.120 回答