README

我们开发了一个jQuery插件，可以帮助您将自己的账户表单添加密码强度功能。

访问pStrength官方页面查看演示 @ https://accountspassword.com/password-strength-jquery-plugin

##插件默认值##

$('#myElement').pStrength({
    'bind': 'keyup change',
    'changeBackground': true,
    'backgrounds'     : [['#cc0000', '#FFF'], ['#cc3333', '#FFF'], ['#cc6666', '#FFF'], ['#ff9999', '#FFF'],
                        ['#e0941c', '#FFF'], ['#e8a53a', '#FFF'], ['#eab259', '#FFF'], ['#efd09e', '#FFF'],
                        ['#ccffcc', '#FFF'], ['#66cc66', '#FFF'], ['#339933', '#FFF'], ['#006600', '#FFF'], ['#105610', '#FFF']],
    'passwordValidFrom': 60, // 60%
    'onValidatePassword': function(percentage) { },
    'onPasswordStrengthChanged' : function(passwordStrength, percentage) { }
});

bind - 当绑定事件被触发时，密码将被重新计算；
changeBackground - 如果为true，元素的背景将根据密码的强度而改变；
backgrounds - 密码强度将从0到12获取值。每个颜色代表每个值的强度颜色；
passwordValidFrom - 如果您定义了一个onValidatePassword函数，那么只有当passwordStrength大于passwordValidFrom时，这个函数才会被调用。在这种情况下，您可以使用percentage参数按需使用；
onValidatePassword - 定义一个函数，每次密码变得有效时都会被调用；
onPasswordStrengthChanged - 定义一个函数，每次重新计算密码强度时都会被调用。您可以使用passwordStrength和percentage参数来自定义设计自己的密码计

##如何使用pStrength插件##

$(document).ready(function(){
    
    $('#myForm').submit(function(){
        return false;
    });

    $('#myElement1, #myElement2').pStrength({
        'changeBackground'          : false,
        'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
            if ($(this).val()) {
                $.fn.pStrength('changeBackground', $(this), passwordStrength);
            } else {
                $.fn.pStrength('resetStyle', $(this));
            }
            $('#' + $(this).data('display'))
                .html('Your password strength is ' + strengthPercentage + '%');
        },
        'onValidatePassword': function(strengthPercentage) {
            $('#' + $(this).data('display')).html(
                $('#' + $(this).data('display')).html() + ' Great, now you can continue to register!'
            );

            $('#myForm').submit(function(){
                return true;
            });
        }
    });
});

##上面示例的HTML代码##

<form id="myForm">
    <input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" /> <div class="left" id="myDisplayElement1"></div>
    <div class="clear"></div>
    <input type="password" id="myElement2" size="40" class="left" data-display="myDisplayElement2" /> <div class="left" id="myDisplayElement2"></div>
</form>

##上面示例的CSS代码##

#myElement1, #myElement2 {
    padding:4px;
    margin:2px;
    border:solid 1px #999;
}

#myElement2 {
    background-color:#036;
}

div {
    margin-left:20px;
    margin-top:6px;
}
.left {
    float:left;
}
.clear {
    clear:both;
}

avtomon / pstrength

维护者

详细信息

README