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/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/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/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/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-vue-loader.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({
|
||||
linkActiveClass: "active",
|
||||
@ -64,6 +64,9 @@ var store = new Vuex.Store({
|
||||
}
|
||||
});
|
||||
|
||||
Vue.use(VeeValidate, {
|
||||
validity: true
|
||||
});
|
||||
new Vue({
|
||||
el: "#ng-tracker-app",
|
||||
router: router,
|
||||
|
@ -1,5 +1,30 @@
|
||||
<template>
|
||||
<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>
|
||||
</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