Nosy Pinocchio Manners

    pstrength

    1.0.9 • Public • Published

    pStrength

    We have developed a jQuery plugin which can help you adding a password strength feature to your own accounts forms.

    Visit the pStrength official page for an working demo @ https://accountspassword.com/password-strength-jquery-plugin

    Plugin defaults##

    $('#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) { }
    });
    
    1. bind - When bind event is raised, password will be recalculated;
    2. changeBackground - If true, the background of the element will be changed according with the strength of the password;
    3. backgrounds - Password strength will get values from 0 to 12. Each color in backgrounds represents the strength color for each value;
    4. passwordValidFrom - If you define a onValidatePassword function, this will be called only if the passwordStrength is bigger than passwordValidFrom. In that case you can use the percentage argument as you wish;
    5. onValidatePassword - Define a function which will be called each time the password becomes valid;
    6. onPasswordStrengthChanged - Define a function which will be called each time the password strength is recalculated. You can use passwordStrength and percentage arguments for designing your own password meter

    How to use pStrength plugin##

    $(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 code for the example above##

    <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 code for the example above##

    #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;
    }
    

    Install

    npm i pstrength

    DownloadsWeekly Downloads

    1

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • m1sh0u