如果另一个相关字段发生更改，则强制进行新的验证

Question

我想验证两个相互关联的文本字段。第一个必须小于第二个（例如最小/最大、开始日期/结束日期）。

所以对于编码部分我创建了这个

HTML：

<div id="app">
  <v-app id="inspire">
          <v-text-field
              v-model="values[0]"
              :rules="firstValidation"
            ></v-text-field>

            <v-text-field
              v-model="values[1]"
              :rules="secondValidation"
            ></v-text-field>
  </v-app>
</div>

JS：

new Vue({
  el: '#app',
  data () {
    return {
      values: [1, 2]
    }
  },
  computed: {
    firstValidation: function () {
      return [value => parseFloat(value) < this.values[1] || "Must be less than second value"]
    },
    secondValidation: function () {
      return [value => parseFloat(value) > this.values[0] || "Must be greater than first value"]
    }
  }
})

我也会在这里提供一个片段

https://codepen.io/anon/pen/NZoaew?editors=1010

当我更改一个字段的值时，另一个字段将不会重新验证。重现步骤：

• 将第一个字段的值更改为 12

第二个字段的值为 2 所以你会得到一个错误

• 将第二个字段的值更改为 22

现在表单有效但第一个字段仍然抛出错误，因为它没有重新验证。

• 从第一个字段中删除一个字符

现在此字段重新验证，您可以提交它。是否有一种机制可以在更改时重新验证其他字段，反之亦然？

我认为一个可能的解决方案是监听@input一个字段的事件，但是你将如何强制另一个字段重新验证呢？

Answer 1

这将验证它们，但只有在用户输入该字段后才会在该字段中显示错误：

new Vue({
  el: '#app',
  data () {
    return {
      values: [1, 2],
      firstValidation: [true],
      secondValidation: [true]
    }
  },
  methods: {
    validate: function (index) {
      const valid = (this.values[0] - this.values[1]) < 0
      if (valid) {
        this.firstValidation = [true];
        this.secondValidation = [true];
        return;
      }
      if (index > 0)
        this.secondValidation = ["Must be greater than first value"];
      else
        this.firstValidation = ["Must be less than second value"];
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
          <v-text-field
              v-model="values[0]"
              @input="validate(0)"
              :rules="firstValidation"
            ></v-text-field>
            
            <v-text-field
              v-model="values[1]"
              @input="validate(1)"
              :rules="secondValidation"
            ></v-text-field>
  </v-app>
</div>

（我不确定为什么样式没有呈现，但它使用与您的 codepen 相同的脚本）