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
)
{
...
}
}
)
,
...
}
,
}
)
;
onValidated
callback is executed after zxcvbn calculates the password's score which is passed as
score
parameter.
| Score | Description |
|---|---|
| 0 | Too guessable: risky password |
| 1 | Very guessable: protection from throttled online attacks |
| 2 | Somewhat guessable: protection from unthrottled online attacks |
| 3 | Safely unguessable: moderate protection from offline slow-hash scenario |
| 4 | Very unguessable: strong protection from offline slow-hash scenario |
score
value, we can show a meter to let user know how strong password is.
<
div
class
=
"
fl w-50 ba b--black-10 h1
"
>
<
div
id
=
"
passwordMeter
"
class
=
"
h-100
"
>
div
>
div
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
// The password meter element
const
passwordMeter
=
document
.
getElementById
(
'passwordMeter'
)
;
const
randomNumber
=
function
(
min
,
max
)
{
return
Math
.
floor
(
Math
.
random
(
)
*
(
max
-
min
+
1
)
+
min
)
;
}
;
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
)
{
// Set the styles for password meter element
// based on the score
switch
(
score
)
{
case
0
:
passwordMeter
.
style
.
width
=
randomNumber
(
1
,
20
)
+
'%'
;
passwordMeter
.
style
.
backgroundColor
=
'#ff4136'
;
case
1
:
passwordMeter
.
style
.
width
=
randomNumber
(
20
,
40
)
+
'%'
;
passwordMeter
.
style
.
backgroundColor
=
'#ff4136'
;
break
;
case
2
:
passwordMeter
.
style
.
width
=
randomNumber
(
40
,
60
)
+
'%'
;
passwordMeter
.
style
.
backgroundColor
=
'#ff4136'
;
break
;
case
3
:
passwordMeter
.
style
.
width
=
randomNumber
(
60
,
80
)
+
'%'
;
passwordMeter
.
style
.
backgroundColor
=
'#ffb700'
;
break
;
case
4
:
passwordMeter
.
style
.
width
=
'100%'
;
passwordMeter
.
style
.
backgroundColor
=
'#19a974'
;
break
;
default
:
break
;
}
}
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>