VeeValidate fastExit 出现多个错误不起作用

Question

我正在使用 Veevalidate 版本 2。该文档要么已损坏，要么没有用。我试图在现场使用多个错误，但它只显示一个。我错过了什么？这是我的代码：

Vue.use(VeeValidate, {
    fastExit: false
});

Validator.extend("number", {
    getMessage: (field) =>
        "Error 1",
    validate: (value) => {
        if (/^[^-][0-9]+|[.][0-9]+/) {
            return true;
        } else {
            return false;
        }
    },
});
Validator.extend("number2", {
    getMessage: (field) =>
        "The field is required",
    validate: (value) => {
        if (value == '') {
            return false;
        } else {
            return true;
        }
    },
});

    <input
      class="ff"
      v-validate="'number|number2|required'"
      v-model="application.number"
    />
  </div>
  <span v-show="errors.has('number')" class="error">
    {{
    errors.first("number")
    }}
  </span>
  <span v-show="errors.has('number2')" class="error">
    {{
    errors.first("number2")
    }}
  </span>

Answer 1

TLDR：代码沙盒示例

根据文档，您可以显示多个错误 errors.collect

<ul>
  <li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>

在您的示例中 - 验证number1不正确，您需要类似if (value.match(<regex>))

主文件

<ul>
  <li v-for="error in errors.collect('fieldName')">{{ error }}</li>
</ul>

应用程序

import Vue from "vue";
import VeeValidate, { Validator } from "vee-validate";
import App from "./App.vue";

Vue.use(VeeValidate, {
  fastExit: false
});

Validator.extend("shouldBeNumber", {
  getMessage: field => "Should be a number",
  validate: value => {
    if (value.match(/^[a-z]+/)) {
      return false;
    } else if (value.match(/^[0-9]+/)) {
      return true;
    }
  }
});

Validator.extend("shouldBeLongerThan3", {
  getMessage: field => "Field should be longer than 3 numbers",
  validate: value => {
    if (value.length < 3) {
      return false;
    } else {
      return true;
    }
  }
});

Validator.extend("shouldNotIncludeSymbols", {
  getMessage: field => "Should not include symbols",
  validate: value => {
    if (value.match(/[^\w\s]+/)) {
      return false;
    } else {
      return true;
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");