有谁知道如何在表单验证后将其提交给JSON?
这是我的代码:
Contact.vue
<template>
<v-container grid-list-md fluid id="contact">
<v-container grid-list-md>
<v-layout row wrap>
<v-flex xs12>
<h2 class="default-custom-title">contact</h2>
<p class="text-description">
Drop a message and we will be in contact soon.
</p>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<form v-on:submit.prevent="onSubmit">
<v-layout row wrap>
<v-flex xs12>
<v-text-field
id="name"
v-model="name"
label="Name"
alpha
:error-messages="errors.collect('name')"
v-validate="'required|alpha'"
data-vv-name="name"
required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
id="phone"
v-model="phone"
label="Phone"
numeric
:error-messages="errors.collect('phone')"
v-validate="'required|numeric'"
data-vv-name="phone"
required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
id="email"
v-model="email"
label="E-mail"
:error-messages="errors.collect('email')"
v-validate="'required|email'"
data-vv-name="email"
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12>
<v-text-field
id="message"
v-model="message"
label="Message"
:counter="300"
:error-messages="errors.collect('message')"
v-validate="'required|max:300'"
data-vv-name="message"
required>
</v-text-field>
</v-flex>
</v-layout>
<v-layout row wrap text-xs-right>
<v-flex xs12>
<v-btn @click="submit" secondary id="btn-submit">submit</v-btn>
<v-btn @click="clear" id="btn-clear">clear</v-btn>
</v-flex>
</v-layout>
</form>
</v-flex>
</v-layout>
</v-container>
</v-container>
</template>
<script>
export default {
name: 'contact',
data () {
return {
name: '',
phone: '',
email: '',
message: ''
}
},
methods: {
submit () {
this.$validator.validateAll()
},
clear () {
this.name = ''
this.phone = ''
this.email = ''
this.message = ''
this.$validator.reset()
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#btn-submit,
#btn-clear{
margin: 1em 0 0 1em!important;
}
@media all and (max-width: 960px) {
.text-description {
font-weight: 400;
font-size: 1.3em;
}
.light-text {
font-weight: 300;
font-size: 1.2em;
}
}
@media all and (max-width: 736px) {
.text-description {
font-weight: 400;
font-size: 1.3em;
}
.light-text {
font-weight: 300;
font-size: 1.2em;
}
.ecn-logo{
width: 350px;
}
}
@media all and (max-width: 480px) {
.ecn-logo{
width: 300px;
}
}
</style>
这里也是main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Vuetify from 'vuetify'
import './stylus/main.styl'
import App from './App'
import router from './router'
import VeeValidate from 'vee-validate'
Vue.use(Vuetify)
Vue.use(VeeValidate)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
我目前正在使用带有vee-validate的Vuetify表单,如下所示: https://vuetifyjs.com/components/forms并且我不想在Vue中使用JQuery。
目前,验证工作正常,但点击&#34;提交&#34;按钮没什么变化。
谢谢!
答案 0 :(得分:1)
在表单验证后进行ajax调用:
this.$validator.validateAll().then(isValid => {
if (isValid) {
/* ajax call if valid */
}
else{
/* something else if not valid */
}
});