Vue.js VueJS+；VeeValidator+；多字段 版本： VueJs:2.2.2 Vee验证：2.0.0-beta.25 说明：

我想知道是否有一种方法可以为多个字段提供唯一的验证器

通常，一个地址表，其中1个输入用于街道，1个输入用于号码，1个输入用于城市

我想对所有元素的组合进行验证

---

我已经阅读了文档，但找不到一个可以帮助我的示例。

您可以将自定义验证器应用于包含所有要一起验证的字段的自定义组件。例如，您可以构建

location

组件（使用

location

而不是

address

，因为

address

是HTML5元素，您不能将Vue组件命名为与现有HTML元素相同的名称）

然后您可以为该组件构建一个验证器

const locationValidator = {
  currentLocation: null,
  getMessage(field, args) {
    if (!this.currentLocation.street)
      return "Location requires a street";
    if (!this.currentLocation.street_number)
      return "Location requires a street_number";
    if (!this.currentLocation.city)
      return "Location requires a city";
  },
  validate(location, args) {
    this.currentLocation = location;

    if (!location.street || !location.street_number || !location.city)
      return false;

    return true
  }
};

最后，您可以在您的Vue中将其整合在一起

new Vue({
  el:"#app",
  data:{
    loc: {}
  },
  created(){
    this.$validator.extend("location", locationValidator)
  }
})

以及您的Vue模板

<span v-show="errors.has('location')" style="color:red">{{ errors.first('location') }}</span>
<location v-validate="'location'" v-model="loc" data-vv-name="location"></location>

{{errors.first（'location'）}

---

下面是一个.

方法，一种是创建一个地址组件，该组件返回一个包含所有值的值，然后为该组合值编写一个自定义验证器。这对我帮助很大。

<span v-show="errors.has('location')" style="color:red">{{ errors.first('location') }}</span>
<location v-validate="'location'" v-model="loc" data-vv-name="location"></location>