vue.js - Vee 验证 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:codesandbox example

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

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

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

main.js

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");

App.vue

<template>
  <div>
    <input
      class="ff"
      v-validate="'shouldBeNumber|shouldBeLongerThan3|shouldNotIncludeSymbols|required'"
      name="number"
      v-model="number"
    >
    <span v-bind:key="index" v-for="(error, index) in errors.collect('number')">{{ error }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      number: null
    };
  }
};
</script>

<style lang="scss" scoped>
.fieldset {
  margin-bottom: 10px;
  border: 0;
}
</style>