使用Vuetify和VE验证提交Vue.js中的表格

问题描述：

有谁知道如何在表单验证后将其提交给JSON？使用Vuetify和VE验证提交Vue.js中的表格

这里是我的代码：

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-的Vuetify形式验证，因为你可以看到这里： https://vuetifyjs.com/components/forms，我不想与Vue使用JQuery。

现在，验证工作，但点击“提交”按钮后没有任何变化。

谢谢！表单验证后

你是什么意思' “没有任何变化”'？ Afaics您没有任何ajax电话。如果您的'submit'函数被触发，并且您想在验证后调用ajax，则可以使用'this。$ validator.validateAll（）。then（（isValid）=> {isValid} {/如果有效*/ } }）;' – Traxo

谢谢@Traxo。我以前没有意识到。现在工作正常。 –

答

使得Ajax调用：

this.$validator.validateAll().then(isValid => { 
    if (isValid) { 
     /* ajax call if valid */ 
    } 
    else{ 
     /* something else if not valid */ 
    } 
});

使用Vuetify和VE验证提交Vue.js中的表格

相关推荐