Question

我有一个自定义规则来检查名称是否唯一，因为表单是可重复的，所以文本字段在表单中存在多次。

我在那里做了一个简单的演示-> https://codesandbox.io/s/v81mxn2ojy在控制台中看一下，如果我在文本字段中编写代码，则会多次调用验证。如果我在文本字段之间切换并更改值，它将堆积。

模板

<p class="sizes__input" v-for="(size, i) in sizes">
  <span>Size: </span>
  <input
    type="text"
    :name="`prefix${i}`"
    class="textfield max-dim__input"
    v-model="size.prefix"
    maxlength="8"
    autocomplete="off"
    v-validate="{ required: true, unique: prefixes }"
    :class="{ error: errors.has(`prefix${i}`) }"
  />
</p>

脚本

data() {
    return {
      sizes: [
        { prefix: "xl_", width: "1400", height: "1400" },
        { prefix: "l_", width: "1100", height: "1100" },
        { prefix: "m_", width: "800", height: "800" },
        { prefix: "s_", width: "600", height: "600" },
        { prefix: "thumb_", width: "200", height: "200" }
      ]
    };
  },
  computed: {
    prefixes() {
      console.log("prefix");
      if (this.sizes) {
        return this.sizes.map(item => {
          return item.prefix;
        });
      }
    }
  }

规则

const unique = {
  getMessage(field) {
    return `Such ${field} already exists.`;
  },
  validate(value, args) {
    if (value) {
      console.log(value, args, args.indexOf(value));
      return args.indexOf(value) === -1;
    }
    return false;
  }
};

Validator.extend("unique", unique, {
  immediate: false
});

确定找到了解决方案：重点是我过滤了数据并将其发送给我的验证器。

inputfield

<input
    v-validate="{ required: true, unique: filteredSizes }"
    @focus="filterSizes(i);"

添加了filteredSizes

data() {
  return {
    filteredSizes: [],
    sizes:

专注

filterSizes(i) {
  const otherSizes = [...this.sizes];
  otherSizes.splice(i, 1);
  this.filteredSizes = otherSizes.map(item => {
    return item.prefix;
  });
}

https://codesandbox.io/s/38qyyymyw5

Answer 1

我相信可能是这样。

您需要使用blur行为。还有一些其他事件可能会使用blur属性覆盖默认事件，从而为您提供data-vv-validate-on相同的行为。

示例：

对于多选，当下拉列表关闭时（也就是用户离开控件时），它会发出关闭事件。

<multiselect data-vv-validate-on="input|close" ...>

对于日期选择器，您可以改为在关闭时进行验证，因为该事件在用户离开控件时发出。

<datepicker data-vv-validate-on="input|closed" ...>

VeeValidate Doc

我希望有帮助。

Vee验证：自定义规则被多次调用

1 个答案: