VeeValidate fastExit с множественной ошибкой не работает - PullRequest
Новая
       48

VeeValidate fastExit с множественной ошибкой не работает

2 голосов
/ 04 мая 2020

Я использую 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>

1 Ответ

4 голосов
/ 06 мая 2020

TLDR: пример кода и коробки

В соответствии с документами вы можете отобразить несколько ошибок с 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>
...