PasswordStrength plugin
Check the strength of a password
Usage
The PasswordStrength plugin uses the popular
zxcvbn library to estimate the strength of a password.
The following piece of code is the starting point to use it:
<html>
<head>
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css" />
</head>
<body>
<form id="demoForm" method="POST">
<input type="password" name="pwd" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
<script src="/vendors/@form-validation/umd/plugin-password-strength/index.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(e) {
FormValidation.formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
passwordStrength: new FormValidation.plugins.PasswordStrength({
field: 'pwd',
message: 'The password is weak',
minimalScore: 3,
onValidated: function(valid, message, score) {
...
}
}),
...
},
}
);
});
</script>
</body>
</html>
The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.
Options
(* denotes a required parameter)
| Option | Type | Description |
|---|
field* | String | The field name |
message | String | The default error message which will be shown to let user know that the password is weak. It then will be replaced with the warning message of zxcvbn library to indicate the specific reason why the password is weak |
minimalScore | Number | For a given password, the zxcvbn library will calculate its strength and the score can be one of 0, 1, 2, 3, 4. The password will be treated as invalid if the scroce if less than minimalScore. The default value is 3 |
onValidated | Function | The callback function that will be triggered after validating the password |
The onValidated function takes three parameters:
| Parameter | Type | Description |
|---|
valid | Boolean | Can be true or false depending on the field is valid or not |
message | String | The error message returned by the zxcvbn library |
score | Number | The score returned by the zxcvbn library. Can be one of 0, 1, 2, 3, 4 |
By using this callback, we can display a progress bar based on the score to let user know how strong the password is.
Using the npm packages
If you are using a bundler such as
Webpack,
Rollup,
Parcel or
Vite, etc., to bundle
your application, then it's recommended to use the FormValidation NPM packages.
$ npm install @form-validation/bundle
$ npm install @form-validation/plugin-password-strength
- Import and use the PasswordStrength plugin:
import { formValidation } from '@form-validation/bundle/popular';
import { PasswordStrength } from '@form-validation/plugin-password-strength';
formValidation(
document.getElementById('demoForm'),
{
fields: {
...
},
plugins: {
passwordStrength: new PasswordStrength({
...
}),
...
},
}
);
Basic example
You can choose the sample password below to see the result.
| Description | Samples |
|---|
| Common password | 12345678, admin, abcdef, password, qwerty |
| Female names | mary, patricia, linda, barbara, elizabeth |
| Male names | james, john, robert, michael, william |
| Surnames | smith, johnson, williams, jones, brown |
| English words on Wikipedia | national, university, people, history, county |
See also
Changelog
- First release. It means that the PasswordStrength plugin requires FormValidation v1.5.0 or newer