Vee跨多个字段验证

Question

我如何验证一个列表的值跨字段，其中至少一个单一的值必须设置（不是零）

我需要验证至少有一个字段被输入（例如总数不是零）

我遇到的问题是，当任何一个字段发生更改时，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;                
        }
    });
},

Answer 1

首先，代码段中有一些错误：
您创建了一个名为total_cost的新vee validate规则，但没有将其绑定到v-validate指令（而是尝试传递一个计算属性）
使用v-validate=“'total_cost'”更改您的输入（注意total_cost绑定为字符串）

现在，您可以使用Vee-验证（源）提供的any方法返回全局错误消息：

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>