try-vue: add some examples of validataion via veevalidate
This commit is contained in:
parent
528fb87f77
commit
f0e4121d1d
@ -24,9 +24,12 @@
|
|||||||
<script type="application/javascript" src="/webjars/vuex/3.1.0/dist/vuex.min.js"></script>
|
<script type="application/javascript" src="/webjars/vuex/3.1.0/dist/vuex.min.js"></script>
|
||||||
<script type="application/javascript" src="/webjars/vue-router/3.0.2/dist/vue-router.min.js"></script>
|
<script type="application/javascript" src="/webjars/vue-router/3.0.2/dist/vue-router.min.js"></script>
|
||||||
<script type="application/javascript" src="/webjars/vue-multiselect/2.0.2/dist/vue-multiselect.min.js"></script>
|
<script type="application/javascript" src="/webjars/vue-multiselect/2.0.2/dist/vue-multiselect.min.js"></script>
|
||||||
|
<script type="application/javascript" src="/webjars/vee-validate/2.1.7/dist/vee-validate.js"></script>
|
||||||
<script type="application/javascript" src="/webjars/moment/2.24.0/moment.js"></script>
|
<script type="application/javascript" src="/webjars/moment/2.24.0/moment.js"></script>
|
||||||
<script type="application/javascript" src="/webjars/http-vue-loader/1.3.5/src/httpVueLoader.js"></script>
|
<script type="application/javascript" src="/webjars/http-vue-loader/1.3.5/src/httpVueLoader.js"></script>
|
||||||
<script type="application/javascript" src="/webjars/axios/0.18.0/dist/axios.min.js"></script>
|
<script type="application/javascript" src="/webjars/axios/0.18.0/dist/axios.min.js"></script>
|
||||||
|
<script type="application/javascript" src="/webjars/jquery/3.0.0/jquery.min.js"></script>
|
||||||
|
<script type="application/javascript" src="/webjars/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
|
||||||
<script type="application/javascript" src="/js/app-config.js?v=@@timestamp"></script>
|
<script type="application/javascript" src="/js/app-config.js?v=@@timestamp"></script>
|
||||||
<script type="application/javascript" src="/js/app-vue-loader.js?v=@@timestamp"></script>
|
<script type="application/javascript" src="/js/app-vue-loader.js?v=@@timestamp"></script>
|
||||||
<script type="application/javascript" src="/js/app-axios.js?v=@@timestamp"></script>
|
<script type="application/javascript" src="/js/app-axios.js?v=@@timestamp"></script>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
/* global Vue, VueRouter, Vuex, httpVueLoaderEx */
|
/* global Vue, VueRouter, Vuex, VeeValidate, httpVueLoaderEx */
|
||||||
|
|
||||||
var router = new VueRouter({
|
var router = new VueRouter({
|
||||||
linkActiveClass: "active",
|
linkActiveClass: "active",
|
||||||
@ -64,6 +64,9 @@ var store = new Vuex.Store({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Vue.use(VeeValidate, {
|
||||||
|
validity: true
|
||||||
|
});
|
||||||
new Vue({
|
new Vue({
|
||||||
el: "#ng-tracker-app",
|
el: "#ng-tracker-app",
|
||||||
router: router,
|
router: router,
|
||||||
|
@ -1,5 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" data-toggle="tab" href="#var1">Вариант 1</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-toggle="tab" href="#var2">Вариант 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane show active" id="var1">
|
||||||
|
<validate-var1></validate-var1>
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="var2">
|
||||||
|
<validate-var2></validate-var2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
module.exports = {
|
||||||
|
components: {
|
||||||
|
"validate-var1": httpVueLoaderEx("/other/var1.vue"),
|
||||||
|
"validate-var2": httpVueLoaderEx("/other/var2.vue")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
81
src/main/resources/static/other/var1.vue
Normal file
81
src/main/resources/static/other/var1.vue
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<form
|
||||||
|
id="app1"
|
||||||
|
@submit.prevent="checkForm"
|
||||||
|
method="post">
|
||||||
|
|
||||||
|
<p v-if="errors.length">
|
||||||
|
<b>Пожалуйста исправьте указанные ошибки:</b>
|
||||||
|
<ul>
|
||||||
|
<li v-for="group in errors.collect()">
|
||||||
|
<ul>
|
||||||
|
<li v-for="error in group">{{ error }}</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="name1">Имя нового продукта: </label>
|
||||||
|
<input
|
||||||
|
id="name1"
|
||||||
|
v-model="name"
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
v-validate="nameValidator">
|
||||||
|
<br>
|
||||||
|
<label for="count1">Количество нового продукта: </label>
|
||||||
|
<input
|
||||||
|
id="count1"
|
||||||
|
v-model="count"
|
||||||
|
type="number"
|
||||||
|
name="count"
|
||||||
|
v-validate="countValidator">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
value="Отправить">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
module.exports = {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
nameValidator: {
|
||||||
|
required: true,
|
||||||
|
min: 6
|
||||||
|
},
|
||||||
|
count: 0,
|
||||||
|
countValidator: {
|
||||||
|
required: true,
|
||||||
|
min_value: 1,
|
||||||
|
max_value: 1024
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
checkForm: function (e) {
|
||||||
|
this.$validator.validate().then(function (valid) {
|
||||||
|
if (valid) {
|
||||||
|
alert("Good!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.$validator.validate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
input:invalid {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
78
src/main/resources/static/other/var2.vue
Normal file
78
src/main/resources/static/other/var2.vue
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<form
|
||||||
|
id="app2"
|
||||||
|
@submit.prevent="checkForm"
|
||||||
|
method="post">
|
||||||
|
|
||||||
|
<p v-if="errors.length">
|
||||||
|
<b>Пожалуйста исправьте указанные ошибки:</b>
|
||||||
|
<ul>
|
||||||
|
<li v-for="group in errors.collect()">
|
||||||
|
<ul>
|
||||||
|
<li v-for="error in group">{{ error }}</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="name2">Имя нового продукта: </label>
|
||||||
|
<input
|
||||||
|
id="name2"
|
||||||
|
v-model="name"
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
required
|
||||||
|
minlength="6"
|
||||||
|
v-validate>
|
||||||
|
<br>
|
||||||
|
<label for="count2">Количество нового продукта: </label>
|
||||||
|
<input
|
||||||
|
id="count2"
|
||||||
|
v-model="count"
|
||||||
|
type="number"
|
||||||
|
name="count"
|
||||||
|
required
|
||||||
|
min="1"
|
||||||
|
max="1024"
|
||||||
|
v-validate>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<input
|
||||||
|
type="submit"
|
||||||
|
value="Отправить">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
module.exports = {
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
name: '',
|
||||||
|
count: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
checkForm: function (e) {
|
||||||
|
this.$validator.validate().then(function (valid) {
|
||||||
|
if (valid) {
|
||||||
|
alert("Good!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.$validator.validate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
input:invalid {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user