javascript密码计未递增

javascript password meter not incrementing

本文关键字：密码 javascript      更新时间：2023-09-26

我知道这经常是一个问题，但我不认为它与设计模式具体相关，而是更愚蠢。

可能有一个简单得可笑的解决方案，但我已经累了，它开始对我有点影响。我已经在控制台中启动了它，它会做出相应的响应，但当我在输入中键入任何内容时，它不会做出响应。

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

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

任何帮助都将不胜感激：）谢谢。

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

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

我已经更新了您的jsFiddle

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

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

此外，您需要使用正确更新密码栏

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

JSFiddle

我认为你可以使用这个，它也很简单。。。Jquery验证插件

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

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

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

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

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

相关文章：