Password Strength Meter
Our JavaScript Password Strength Meter replaces existing password strength meters on signup and password change forms to not only provide a typical, algorithmic strength estimation, but also verify that the password has not been publicly exposed.
The password strength meter is absolutely free to use in its branded form up to 100,000 requests from your domain each month.
The strength meter can be instantiated on an existing password INPUT element in a couple of different ways: either through extended HTML attributes applied to the INPUT or by a direct call to the Enzoic JavaScript API.
This is the most straightforward way to use the strength meter on your page. Just add the HTML attributes to your existing password input, disable any existing strength meter, and go.
Example:
<input type="password" enz-enable enz-theme="light" enz-min-password-score="4" enz-css-success-class="field-ok" enz-css-fail-class="field-invalid" />
Available HTML attributes:
Attribute | Description | Default |
---|---|---|
enz-enable | This is the only attribute required to instantiate the Enzoic strength meter on an HTML INPUT element of type password. | n/a |
enz-theme | Which display theme to use for the strength meter UI. Current possibilites are “default” and “light”. | “default” |
enz-min-password-score | The minimum password score (0-5) you require. This defines the threshold used to determine when the success and fail CSS classes get added to the INPUT element. | 4 (Strong) |
enz-css-success-class | The CSS class which gets added to the password INPUT element when the password strength is at least equal to the value of the enz-min-password-score. | “enz-success” |
enz-css-fail-class | The CSS class which gets added to the password INPUT element when the password strength is less then the value of the enz-min-password-score. | “enz-fail” |
enz-lang | The Password Strength Meter currently has translations available for English, Spanish, Portuguese, French, and German. By default, the value of navigator.language will be used to select a language. Use this attribute to specify a language using its ISO 639-1 code, e.g. “en”, “de”, “fr”, etc. | navigator.language |
This is the approach to use if you have an input element which is not statically rendered (e.g. is rendered from JavaScript) and it is not straightforward to add the HTML attributes to it. In that case, you can call the Enzoic object’s applyToInputElement method to directly provide the element and options.
Example of creating the Enzoic control via the JavaScript API’s applyToInputElement method:
var options = {
theme: 'default',
minimumPasswordScore: Enzoic.PASSWORD_STRENGTH.Strong,
cssSuccessClass: 'enz-success',
cssFailClass: 'enz-fail'
};
Enzoic.applyToInputElement(document.getElementById("id_of_your_password_input"), options);