vue-coe-validator
✅
Another validation form for the Vue. Validates input fields of multiple forms and displays errors.
Note: without any dependencies.
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" />
0 Feb 15, 2017
0 Feb 28, 2020
1 Sep 24, 2019
4 Oct 10, 2022
42 Nov 21, 2022
0 Sep 18, 2019
45 Nov 10, 2022
10 Mar 31, 2022
5 Oct 19, 2022
18 Dec 21, 2022
21 Feb 28, 2022
1 Mar 24, 2020
15 Apr 13, 2022
58 Aug 23, 2022
1 May 7, 2019
15 Nov 24, 2022
0 Jan 14, 2022
3 Apr 13, 2022
41 Jul 10, 2022