Bower Package Manager

Installation via bower package manager is as simple as running:

$ bower install strength-meter

Node Package Manager

Installation via NPM is as simple as running:

$ npm install strength-meter

Composer Package Manager

You can install strength-meter via composer package manager. Either run:

$ php composer.phar require kartik-v/strength-meter "dev-master"

or add:

"kartik-v/strength-meter": "dev-master"

to your composer.json file

Manual Install

You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin asset files and folders into your project.

language

string language configuration for the plugin to enable the plugin to display messages for your locale (you must set the ISO code for the language). You can have multiple language widgets on the same page. Note you must load the language specific locale file strength-meter-<LANG>.js available in the js/locales folder of the plugin. The file must be loaded after strength-meter.js.

showMeter

boolean whether the strength meter is to be displayed. Defaults to true.

showToggle

boolean whether to display the checkbox for toggling display of password text. Defaults to true.

inputTemplate

string the template for displaying the password input field (when toggleMask is true). This defaults to:

<div class="input-group">

    {input}

    <span class="input-group-addon">{toggle}</span>

</div>

The following special tokens will be replaced in the template:

• {input} will be replaced with the password input.

• {toggle} will be replaced with the toggle mask checkbox.

inputNoToggleTemplate

string the template for displaying the password input field(when toggleMask is false). This defaults to:

{input}

The following special tokens will be replaced in the template:

• {input} will be replaced with the password input.

meterTemplate

string the template for displaying the password strength meter. This defaults to:

<div class="kv-scorebar-border">

    {scorebar}

    {score}

</div>

{verdict}

The following special tokens will be replaced in the template:

• {scorebar} will be replaced with the strength score color bar.

• {score} will be replaced with the strength score in %.

• {verdict} will be replaced with the calculated strength verdict.

mainTemplate

string the template for displaying the overall widget/plugin. This defaults to:

<table class="kv-container">

    <tr>

        <td>{input}</td>

        <td class="kv-meter-container">{meter}</td>

    </tr>

</table>

The following special tokens will be replaced in the template:

• {input} will be replaced with the parsed output from the inputTemplate.

• {meter} will be replaced with the parsed output from the meterTemplate.

meterClass

string the CSS class for displaying the meter. Defaults to kv-meter.

scoreBarClass

string the CSS class for displaying the strength score color bar. Defaults to kv-scorebar.

scoreClass

string the CSS class for displaying the strength score. Defaults to kv-score.

verdictClass

string the CSS class for displaying the strength verdict. Defaults to kv-verdict.

containerClass

string the CSS class for wrapping the whole widget. Defaults to kv-password.

inputClass

string the CSS class for displaying the password input. Defaults to form-control.

toggleClass

string the CSS class for displaying the toggle mask checkbox. Defaults to kv-toggle.

toggleTitle

string the title to be displayed on hovering the toggle mask checkbox. Defaults to Show/Hide Password. If you load in a locale specific JS, this will be overridden with the language specific toggleTitle.

verdictTitles

array the verdict titles corresponding to each strength verdict (0 to 6). If you load in a locale specific JS, this will be overridden with the language specific verdict. Defaults to:

{

    0: 'Too Short',

    1: 'Very Weak',

    2: 'Weak',

    3: 'Good',

    4: 'Strong',

    5: 'Very Strong',

}

verdictClasses

array the verdict CSS classes corresponding to each strength verdict (0 to 6). Defaults to:

{

    0: 'badge bg-default',

    1: 'badge bg-danger',

    2: 'badge bg-warning',

    3: 'badge bg-info',

    4: 'badge bg-primary',

    5: 'badge bg-success',

}

rules

array the strength validation rules. You normally do not need to change this, as this will impact the strength score algorithm. Defaults to:

{

    midChar: 2,

    consecAlphaUC: 2,

    consecAlphaLC: 2,

    consecNumber: 2,

    seqAlpha: 3,

    seqNumber: 3,

    seqSymbol: 3,

    length: 4,

    number: 4,

    symbol: 6

}

Each rule element corresponds to the following:

• midChar: The multiplication factor (addition) for middle numbers or symbols.

• consecAlphaUC: The multiplication factor (reduction) for consecutive upper case alphabets.

• consecAlphaLC: The multiplication factor (reduction) for consecutive lower case alphabets.

• consecNumber: The multiplication factor (reduction) for consecutive numbers.

• seqAlpha: The multiplication factor (reduction) for sequential alphabets (3+).

• seqNumber: The multiplication factor (reduction) for sequential numbers (3+).

• seqSymbol: The multiplication factor (reduction) for sequential symbols (3+).

• length: The multiplication factor (addition) for the count of characters.

• number: The multiplication factor (addition) for count of numbers in the input.

• symbol: The multiplication factor (addition) for count of symbols in the input.

strength:change

This event is triggered when the password input/strength is changed.

Example:

$('#input-id').on('strength:change', function(event) {

    console.log("strength:change");

});

strength:reset

This event is triggered when the password input/strength is reset to initial value.

Example:

$('#password-id').on('strength:reset', function(event) {

    console.log("strength:reset");

});

strength:toggle

This event is triggered on toggling the password toggle mask (i.e. when password is shown/hidden).

Example:

$('#password-id').on('strength:toggle', function(event) {

    console.log("strength:toggle");

});

refresh

Refreshes the strength after changing the password input value via javascript.

$('#input-id').val(3);

$('#input-id').strength('refresh');

reset

Reset the strength to the score based on the initial value of the password. For example after a form reset.

$('#password-id').strength('reset');

score

Return the current strength score:

alert($('#password-id').strength('score'));

verdict

Return the current strength verdict:

alert($('#password-id').strength('verdict'));