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