adduser.vue
2.36 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-right>
<v-flex xs12 sm6>
<v-flex align-center justify-center layout text-xs-center>
<v-avatar size="50px">
<img src="/static/avatar/download.png"/> </v-avatar>
</v-flex>
<v-form>
<v-text-field
v-validate="'required|max:15'"
v-model="Fname"
:error-messages="errors.collect('name')"
label="First Name"
data-vv-name="name"
required >
</v-text-field>
<v-text-field
v-validate="'required|max:10'"
v-model="Lname"
:error-messages="errors.collect('name')"
label="Last Name"
data-vv-name="name"
required>
</v-text-field>
<v-text-field
v-validate="'required|email'"
v-model="email"
:error-messages="errors.collect('email')"
label="E-mail"
data-vv-name="email"
required>
</v-text-field>
<v-text-field
v-model="dateFormatted"
label="Date of Birth"
hint="DD/MM/YYYY"
persistent-hint
@blur="date = parseDate(dateFormatted)"
v-validate="'required'" >
</v-text-field>
<v-btn @click="clear" dark>clear</v-btn>
<v-btn @click="submit" dark>Add</v-btn>
</v-form>
</v-flex>
</v-layout>
</v-container>
</v-content>
</template>
<script>
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
$_veeValidate: {
validator: 'new'
},
data: () => ({
name: '',
email: '',
// select: null,
// items: [
// 'Item 1',
// 'Item 2',
// 'Item 3',
// 'Item 4'
// ],
checkbox: null,
dictionary: {
attributes: {
email: 'E-mail Address'
// custom attributes
},
custom: {
name: {
required: () => 'Name can not be empty',
max: 'The name field may not be greater than 10 characters'
// custom messages
},
select: {
required: 'Select field is required'
}
}
}
}),
mounted () {
this.$validator.localize('en', this.dictionary);
},
methods: {
submit () {
this.$validator.validateAll();
},
clear () {
this.name = '';
this.email = '';
this.date = '';
// this.select = null;
// this.checkbox = null;
this.$validator.reset();
}
}
};
</script>