Question

版本：

VueJs：2.2.2
Vee-Validate：2.0.0-beta.25

说明

我想知道是否有办法为多个字段设置唯一的验证器？

通常情况下，地址表格在街道上有1个输入，1表示数字，1表示城市

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

我已阅读文档，但我无法找到可以帮助我的例子。

Answer 1

您可以将自定义验证程序应用于包含要一起验证的所有字段的自定义组件。例如，您可以构建location组件（使用location而不是address，因为address是HTML5元素，并且您不能将Vue组件命名为与现有组件相同HTML元素）。

Vue.component("location", {
  props:["value"],
  template: "#location-template",
  data(){
    return {
      location: this.value
    }
  },
  methods:{
    update(){
      this.$emit('input', Object.assign({}, this.location))
    }
  },
})

然后，您可以为该组件构建验证器。

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>

这是example。

VueJS + VeeValidator +多个字段

说明

1 个答案: