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

Question

我的要求是这样的。

1. 我必须输入字段以验证用户输入。
2. 当用户填写字段并单击“提交”按钮时，在转到提交之前，我要显示所有错误消息。
3. 如果用户数据中没有错误，则应提交

这是我的代码。

<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>

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

和

这仅在您触摸输入字段时显示错误。无论您是否触摸这些字段，我都想显示所有验证错误，当您单击“提交”按钮时，我想显示所有错误。

Answer 1

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 2

您可以使用validateAll方法：

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

在这里摆弄

Answer 3

在最新的 vee-validate（我写这篇文章时是 3.0.5 版）中，这一切都改变了。您需要将整个表单包装在一个ValidationObserver组件中，并带有一个 ref（稍后在您的提交方法中访问）-

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

您的提交方法需要如下所示：

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/api/validation-observer.html