<
form
id
=
"
loginForm
"
method
=
"
POST
"
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-sm-3 col-form-label
"
>
Username
label
>
<
div
class
=
"
col-sm-4
"
>
<
input
type
=
"
text
"
class
=
"
form-control
"
name
=
"
username
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
label
class
=
"
col-sm-3 col-form-label
"
>
Password
label
>
<
div
class
=
"
col-sm-4
"
>
<
input
type
=
"
password
"
class
=
"
form-control
"
name
=
"
password
"
/>
div
>
div
>
<
div
class
=
"
form-group row
"
>
<
div
class
=
"
col-sm-9 offset-sm-3
"
>
<
button
type
=
"
submit
"
class
=
"
btn btn-primary
"
>
Login
button
>
div
>
div
>
form
>
// LoginForm.vue
<
template
>
template
>
<
script
>
import
formValidation
from
'formvalidation/dist/es6/core/Core'
;
module
.
exports
=
{
mounted
:
function
(
)
{
// Create a FormValidation instance
this
.
fv
=
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
fields
:
{
username
:
{
validators
:
{
notEmpty
:
{
message
:
'The username is required'
}
,
stringLength
:
{
min
:
6
,
max
:
30
,
message
:
'The username must be more than 6 and less than 30 characters long'
,
}
,
regexp
:
{
regexp
:
/
^[a-zA-Z0-9_]+$
/
,
message
:
'The username can only consist of alphabetical, number and underscore'
,
}
,
}
}
,
password
:
{
validators
:
{
notEmpty
:
{
message
:
'The password is required'
}
,
stringLength
:
{
min
:
8
,
message
:
'The password must have at least 8 characters'
,
}
,
}
}
,
}
,
plugins
:
{
...
}
,
}
)
;
}
,
}
;
script
>
// LoginForm.vue
import
formValidation
from
'formvalidation/dist/es6/core/Core'
;
// FormValidation plugins
import
Icon
from
'formvalidation/dist/es6/plugins/Icon'
;
import
Trigger
from
'formvalidation/dist/es6/plugins/Trigger'
;
import
Bootstrap
from
'formvalidation/dist/es6/plugins/Bootstrap'
;
import
SubmitButton
from
'formvalidation/dist/es6/plugins/SubmitButton'
;
module
.
exports
=
{
mounted
:
function
(
)
{
this
.
fv
=
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
trigger
:
new
Trigger
(
)
,
bootstrap
:
new
Bootstrap
(
)
,
icon
:
new
Icon
(
{
valid
:
'fa fa-check'
,
invalid
:
'fa fa-times'
,
validating
:
'fa fa-refresh'
}
)
,
submitButton
:
new
SubmitButton
(
)
,
}
,
}
)
;
}
,
}
;
// Listen on event
this
.
fv
.
on
(
'core.field.invalid'
,
(
e
)
=>
{
...
}
)
;
// Call API
this
.
fv
.
revalidateField
(
'...'
)
;
import
formValidation
from
'formvalidation/dist/es6/core/Core'
;
// LoginForm.vue
// Import an external validator
import
phone
from
'formvalidation/dist/es6/validators/phone'
;
// Or import your own validator
import
strongPassword
from
'/path/to/your/strongPassword'
;
module
.
exports
=
{
mounted
:
function
(
)
{
this
.
fv
=
formValidation
(
document
.
getElementById
(
'loginForm'
)
,
{
fields
:
{
phoneNumber
:
{
validators
:
{
phone
:
{
...
}
}
}
,
password
:
{
validators
:
{
checkPassword
:
{
...
}
}
}
,
}
,
}
)
;
// Register validators
this
.
fv
.
registerValidator
(
'phone'
,
phone
)
.
registerValidator
(
'checkPassword'
,
strongPassword
)
;
}
,
}
;
// LoginForm.vue
module
.
exports
=
{
beforeDestroy
:
function
(
)
{
if
(
this
.
fv
)
{
this
.
fv
.
destroy
(
)
;
}
}
,
}
;