Ви валидировать через несколько полей - PullRequest
Новая
       8

Ви валидировать через несколько полей

1 голос
/ 08 марта 2019

Как я могу проверить список значений по полям, где должно быть установлено хотя бы одно значение (не ноль)

Мне нужно проверить, что введено хотя бы одно поле (например, общее количество неноль)

Проблема, с которой я столкнулся, заключается в том, что validator :: total_cost не переоценивает все проверяемые поля при изменении одного из них.

Ввод правильного значения в«Любой» вход должен указать «все» другие входные данные для переоценки по отношению к новому вычисляемому полю!

Любая помощь будет благодарна.

Например (мой набор намного больше) 

 V1  V2  V3  V4  V5          Tot
[0] [0] [0] [0] [0] -------- [0] (invalid)  
[0] [0] [0] [0] [1] -------- [1] (valid)
[1] [0] [0] [0] [1] -------- [2] (valid)
[0] [0] [1] [0] [1] -------- [3] (valid)

Разметка, которую я использую 

<input type="text" v-model.number="v1" data-vv-as="v1" v-validate="anyValue":name="v1"/>

<input type="text" v-model.number="v1" data-vv-as="v2" v-validate="anyValue":name="v2"/>

<input type="text" v-model.number="v2" data-vv-as="v3" v-validate="anyValue":name="v3"/>

<input type="text" v-model.number="v3" data-vv-as="v4" v-validate="anyValue":name="v4"/>

<input type="text" v-model.number="v4" data-vv-as="v5" v-validate="anyValue":name="v5"/>

AnyValue - это вычисляемое свойство 

 computed: {
    anyValue: function () {
        return {
           // required: true,
            between: [0, 99999999],
            decimal: 2,
            total_cost: this.totalCost /* THIS IS COMPUTED */
        }
    },
    totalCost: function () {
        return this.v1 + this.v2 + this.v3 + this.v4 + this.v5;           
    }
 created: function () {
    this.$validator.extend('total_cost', {
        vTotalCost:0,
        getMessage: function (field) { 
         return 'At least one value must be supplied'; 
        },
        validate: function (value) {
            this.vTotalCost = value;
            console.log("the value is " + this.vTotalCost);
            return this.vTotalCost != 0;                
        }
    });
},

1 Ответ

0 голосов
/ 10 марта 2019

Во-первых, в вашем фрагменте есть ошибки:
Вы создаете новое правило проверки подлинности с именем total_cost, но не привязываете его к директиве v-validate (вместо этого вы пытаетесь передать вычисляемое свойство).
Измените свои входные данные с помощью v-validate="'total_cost'" (обратите внимание, что total_cost связан как строка)

Теперь вы можете использовать метод any, предоставленный Vee-validate ( source ), чтобы вернуть глобальное сообщение об ошибке: 

Vue.use(VeeValidate)

new Vue({
  el: "#app",
  data () {
    return { v1: 0, v2: 0, v3: 0, v4: 0, v5: 0 }
  },
  computed: {
    errorMsg() {
      if (this.errors.any()) {
      	return 'At least one value must be supplied'
      }
    }
  },
  created: function () {
    this.$validator.extend('total_cost', {
      vTotalCost:0,
      getMessage: function (field) { 
        return 'At least one value must be supplied'; 
      },
      validate: function (value) {
        this.vTotalCost = value;
        return this.vTotalCost != 0;                
      }
    })
  }
})
.has-error {
  color: red;
  font-size: 12px;
}
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<script src="https://unpkg.com/vee-validate@2.0.0-beta.25"></script>
<div id="app">
  <input type="text" v-model.number="v1" data-vv-as="v1" v-validate="'total_cost'" name="v1"/>
  <input type="text" v-model.number="v2" data-vv-as="v2" v-validate="'total_cost'" name="v2"/>
  <input type="text" v-model.number="v3" data-vv-as="v3" v-validate="'total_cost'" name="v3"/>
  <input type="text" v-model.number="v4" data-vv-as="v4" v-validate="'total_cost'" name="v4"/>
  <input type="text" v-model.number="v5" data-vv-as="v5" v-validate="'total_cost'" name="v5"/>
  <p class="has-error">{{ errorMsg }}</p>
</div>
...