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