Another validation form for the Vue. Validates input fields of multiple forms and displays errors.
Note: without any dependencies.
✨ Example✨
Install
yarn add vue-coe-validator
Include Plugin
import Vue from 'vue'
import { validator } from 'vue-coe-validator'
Vue.use(validator)Include Mixin (required only on components that need validation)
import { formSetup } from 'vue-coe-validator'
mixins: [ formSetup ]Pay attention:
Be careful not to create a state with the name: validations and messages.
These names are reserved for the library and overwriting them may compromise their behavior.
How to use
<template>
<section>
<form name="form1">
<c-input
name="input1"
:validation="$hasError('input1')"
v-model="form1.input1"
/>
<c-input
name="input2"
:validation="$hasError('input2')"
v-model="form1.input2"
/>
<c-input
name="input3"
:validation="$hasError('input3')"
v-model="form1.input3"
/>
</form>
<form name="form2">
<c-input
name="input1"
:validation="$hasError('input1', 'form2')"
v-model="form2.input1"
/>
</form>
</section>
</template>
<script>
import { formSetup } from 'vue-coe-validator'
export default {
mixins: [ formSetup ],
data () {
return {
form1: { input1: '', input2: '22' },
form2: { input1: '33' }
}
},
validation: {
form1: {
input1: {
required: true,
alphabetic: true
},
input2: {
required: true,
pattern: /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i
},
input3: {
required: true
}
},
form2: {
input1: {
required: true,
alpha: true
}
}
},
messages: {
form1: {
input1: {
required: 'não pode ser vazio!',
alphabetic: 'tá errado, é alphabetic!'
},
input2: {
required: 'preenche tudo!',
pattern: 'precisa ser e-mail!'
}
},
form2: {
input1: {
required: 'tá vazio, não pode!'
}
}
}
}
</script>You can also define validations with directives
<c-input
name="name"
:validation="$hasError('name')"
v-validator="{ required: true }"
v-model="form1.name"
/>Or programmatically, using $validator.add
methods: {
addField () {
// add new field
this.form1 = {
...this.form1,
coe: 'mané'
}
// create validation for new field
const validations = {
coe: { required: true }
}
// set validation for new field
this.$validator.add(validations, 'form1')
}
}| Name | required | About |
|---|---|---|
| form | true |
set an name for the scope of the form |
| input | true |
name the input with the tag name and its respective form value |
| Name | Params | About |
|---|---|---|
| $hasError | (inputName[str], formName[str]) |
returns a boolean |
*formName: required only when you have more than one form
| Name | Params | About |
|---|---|---|
| add | (validations[obj], formName[str]) |
set validation for new field |
| touch | (inputName[str], formName[str]) |
touches a field (isTouched = true) |
| resetField | (formName[str]) |
resets a field |
| resetForm | (formName[str]) |
resets a form |
| validateField | (formName[str]) |
touches a field and checks if it is valid |
| validateForm | (formName[str]) |
touch the form fields and check if it is valid |
| isFormValid | (formName[str]) |
promise that returns a boolean |
*formName: required only when you have more than one form
import { validator } from 'vue-coe-validator'
Vue.use(validator, {
messages: {
required: 'must be filled',
alpha: 'must be alpha'
}
})import { validator } from 'vue-coe-validator'
Vue.use(validator, {
validateOnBlur: true // default is false
})
alphabetic
- default message: Must be a alphabetic value
- type: Boolean
{
alphabetic: true
}
alpha
- default message: Must only contain letters and numbers
- type: Boolean
{
alpha: true
}
pattern
- default message: Invalid, try again
- type: String
{
pattern: /^[A-Z0-9_'%=+!`#~$*?^{}&|-]+([.][A-Z0-9_'%=+!`#~$*?^{}&|-]+)*@[A-Z0-9-]+(\.[A-Z0-9-]+)+$/i
}
numeric
- default message: Must be a numeric value
- type: Boolean
{
numeric: true
}
required
- default message: Field is required
- type: Boolean
{
required: true
}
custom
- default message: Campo inválido
- type: Array
{
custom: [
(value) => value === '123',
(value) => typeof value === 'string'
]
}
customAsync
- default message: Campo inválido
- type: Array
{
customAsync: [
value => new Promise(resolve => setTimeout(() => {
resolve(value === '[email protected]')
}, 2000)),
value => new Promise(resolve => setTimeout(() => {
resolve(typeof value === 'string')
}, 3000))
]
}