Question

我如何验证表单然后提交？

按钮

<v-btn round color="primary" :disabled="errors.any()"  v- 
 on:click.prevent="post">Submit</v-btn>

我的表格的一部分

 <v-text-field v-model="signature"
                        data-vv-name="signature"
                        v-validate="'required'"
                        label="Signature: Enter Fullname"
                        single-line></v-text-field>
          <span v-show="errors.has('signature')" class="text-danger">{{ 
     errors.first('signature') }}</span>

我的方法的一部分

 methods: {
  post: function () {
    this.$http.post('/api/application/', {
      LastName: this.LastName,
      MiddleInitial: this.MiddleInitial

Answer 1

您似乎正在使用基于v-validate =“'required'”属性的VeeValidate。假设已安装，您可以执行以下操作：

<v-btn round color="primary" :disabled="errors.any()"  v- 
 on:click.prevent="validateBeforeSubmit">Submit</v-btn>

methods: {
  validateBeforeSubmit() {
    this.$validator.validateAll().then((result) => {
      if (result) {
        this.post();
        return;
      }

      alert('Correct the errors!');
    });
  },
  post: function () {
    this.$http.post('/api/application/', {
      LastName: this.LastName,
      MiddleInitial: this.MiddleInitial
    });
  }
}

更多信息，请访问：https://baianat.github.io/vee-validate/examples/

提交前验证字段

1 个答案: