Question

我知道这在这里经常是一个问题，但我不认为它特别涉及到设计模式，而是更多地依赖于我的愚蠢。

这可能是一个非常简单的解决方案，但我很累，而且它开始对我有所帮助了。我已经在控制台中解雇它并且它会相应地做出响应，但是当我在输入中输入任何内容时，它都没有响应。

这是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

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

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

Answer 1

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

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

我已更新您的jsFiddle

Answer 2

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

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

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

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

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

Answer 3

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

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

您还需要使用

正确更新密码栏

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

JSFiddle

Answer 4

我认为你可以使用这个简单易用的... Jquery validation plugin

javascript密码计不递增

4 个答案: