vue.js - 如何在一个更新时验证两个输入字段

Question

我正在尝试在更改值时验证两个输入字段。这是必需的，否则这两个字段之间的验证将无法正常工作。

我创建了一个示例来重现问题，html 代码应该是不言自明的

<div id="app">
  <v-app id="inspire">
          <v-text-field
              :value="values[0]"
              :rules="firstRules"
              @input="setFirstValue"
            ></v-text-field>

            <v-text-field
              :value="values[1]"
              :rules="secondRules"
              @input="setSecondValue"
            ></v-text-field>
  </v-app>
</div>

重要的是要注意 v-model 是不可能的，因为该组件将值作为 prop 并通过更新的值传递回父级发出更新事件。

vue实例:

new Vue({
  el: '#app',
  data () {
    return {
      values: [5345, 11],
      firstRules: [true],
      secondRules: [true]
    }
  },
  created: function () {
    this.setFirstValue(this.values[0])
    this.setSecondValue(this.values[1])
  },
  computed: {
    firstValidation: function () {
      return [value => value.length < this.values[1].length || "Must have less characters than second value"]
    },
    secondValidation: function () {
      return [value => value.length > this.values[0].length || "Must have more characters than first value"]
    }
  },
  methods: {
    setFirstValue: function (newValue) {
      this.values[0] = newValue
      this.firstRules = this.validateValue(this.values[0], this.firstValidation)
      this.secondRules = this.validateValue(this.values[1], this.secondValidation)
    },
    setSecondValue: function (newValue) {
      this.values[1] = newValue
      this.secondRules = this.validateValue(this.values[1], this.secondValidation)
      this.firstRules = this.validateValue(this.values[0], this.firstValidation)
    },
    validateValue: function (value, rules) {
      for (const rule of rules) {
          const result = rule(value)

          if (typeof result === 'string') {
            return [result]
          }
      }

      return [true]
    }
  }
})

在“开始”时，规则返回一个有效状态，但我想在加载组件(创建 Hook ？)时验证这两个字段以立即更新此状态。

我必须将验证规则放入计算属性，因为它们必须访问当前值。否则他们将验证旧值。

每个输入事件都会验证这两个字段并更新规则状态。

我创建了一个示例在这里玩

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

不幸的是出现了两个问题:

• 一开始没有直接验证字段
• 当将一个输入字段更改为有效状态时，规则仍将返回一条错误消息

当一个字段更新时，如何为两个字段设置验证？

Answer 1

看来你想多了。

默认情况下，vuetify 输入的验证逻辑仅在绑定(bind)到该输入的值发生更改时触发。为了触发对其他输入的验证，您可以将两个输入包装在 v-form 中。组件并给它一个 ref属性。这样，您就可以访问该组件的 validate方法，它将触发表单内任何输入的验证逻辑。

模板看起来像这样:

<v-form ref="form">
  <v-text .../>
  <v-text .../>
</v-form>

并在您的脚本中触发验证:

mounted() {
  this.$refs.form.validate();
}

上面的代码将在安装组件时验证表单，但您还需要在任一输入的值发生变化时触发对两个输入的验证。为此，您可以将观察者添加到 values .但是，您需要调用表单的 validate Vue 更新 DOM 以反射(reflect) values 中的变化后的方法.

为此，要么将调用包装在 this.$nextTick 中调用:

watch: {
  values() {
    this.$nextTick(() => {
      this.$refs.form.validate();
    });
  }
}

或者使用 async function和 await this.$nextTick :

watch: {
  async values() {
    await this.$nextTick();
    this.$refs.form.validate();
  }
}

因此，现在当组件初始化时以及任何一个值发生变化时，都会对两个输入触发验证。但是，如果您更愿意将验证调用保留在一个位置而不是同时在 mounted 中进行钩子(Hook)和 values watcher，你可以让watcher immediate并摆脱 mounted 中的电话钩子(Hook)。

所以这是最后一个例子:

watch: {
  immediate: true,
  async handler() {
    await this.$nextTick();
    this.$refs.form.validate();
  }
}

---

现在验证逻辑在预期的时间触发，但您的验证逻辑仍然存在一个问题。当您的组件初始化时，values数据属性设置为 Number 的数组类型值，没有 length属性(property)。因此，例如，如果您仅将第一个输入更改为 "5"第二个输入仍然是11 , 然后 (11).length是undefined和 "5".length < undefined是false .

无论如何，在比较它们的长度之前，您需要更改要与字符串比较的值。像这样:

value => (value + '').length < (this.values[1] + '').length

---

最后，因为您可以动态调用 validate在表单上，​​有机会降低组件的大部分复杂性。

这是一个简化的版本:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  data() {
    return {
      values: [5345, 11]
    }
  },
  computed: {
    rules() {
      const valid = (this.values[0] + '').length < (this.values[1] + '').length;
      return {
        first: [() => valid || "Must have less characters than second value"], 
        second: [() => valid || "Must have more characters than first value"]
      };
    }
  },
  watch: {
    values: {
      immediate: true,
      async handler() {
        await this.$nextTick();
        this.$refs.form.validate();
      }
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-form ref="form">
      <v-text-field v-model="values[0]" :rules="rules.first"></v-text-field>
      <v-text-field v-model="values[1]" :rules="rules.second"></v-text-field>
    </v-form>
  </v-app>
</div>