Question

我的要求是这样的。

我必须输入字段来验证用户输入。
当用户填写字段并点击提交按钮时，在进行提交之前，我想显示所有错误消息。
如果用户数据中没有错误，则应该提交

这是我的代码。

＆＃13;

<template>
  <div>
      <h1>Add Items</h1>
      Product Name : 
      <input
      type="text"
      name="product"
      v-model="product"
      v-validate="'required|alpha_dash'"
      >
      <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      Product Price : 
      <input 
      type="number" 
      name="price" 
      v-model="price"
      v-validate="'required|min_value:100|max_value:500'"
      >
    <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      <button @click="submit">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      product: ""
    };
  },
  methods: {
    submit() {
      alert("On submit");
    }
  }
};
</script>

＆＃13;

现在它只显示第一个错误{{errors.first('product')}}而不是我想要一次显示所有错误

和

只有触摸输入字段才会显示错误。我想显示所有验证错误，无论你是否触摸字段，我想在你点击提交按钮时显示所有错误。

Answer 1

您可以使用validateAll方法：

   submit() {
      this.$validator.validateAll()
      if (!this.errors.any()) {
        alert('submit')
      }
    }

fiddle here

Answer 2

Sovalina正常工作，但是$ validator.validateAll（）在警报后运行，这意味着不会先对其进行验证。我找到了这段代码，它对我来说很好用：

submit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Form Submitted!');
          return;
        }

        alert('Correct them errors!');
      });
    }

从这里：https://baianat.github.io/vee-validate/examples/

Answer 3

在最新的vee-validate（在我撰写本文时为3.0.5版）中，这一切都已更改。您需要将整个表单包装在一个ValidationObserver组件中，并带有一个ref（稍后您可以在Submit方法中对其进行访问）-

    <ValidationObserver ref="observer" v-slot="{ invalid }"  @submit.prevent="submit()">
        <ValidationProvider ...
            <input... etc

您的Submit方法应如下所示：

async submit () {
  const isValid = await this.$refs.observer.validate()
  if (isValid) {
    // data is valid - post your form data
  } else {
    alert('Data isn't valid')
  }
}

有多种方法可以导入ValidationProvider组件-这是常规的vue东西...这是指向文档的链接：

https://logaretm.github.io/vee-validate/guide/validation-observer.html

Vue.js VeeValidate如何在所有数据有效之前阻止数据的提交

3 个答案: