Blame view
src/pages/adduser.vue
2.36 KB
93a68cfa1
first commit
|
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>
|