如何仅在验证通过后触发v-text-field的blur事件函数？

当然可以实现，下面提供两种实用的方案：

方案一：利用组件内置的验证状态 #

Vuetify的v-text-field组件内置了isValid属性，用来标识当前输入是否通过所有验证规则。我们可以通过给组件添加ref来访问这个状态，在blur事件中判断验证通过后再调用目标函数：

<v-text-field
    ref="textField"
    :rules="validationRules"
    @blur="handleBlur"
></v-text-field>

对应的处理函数：

methods: {
  handleBlur() {
    if (this.$refs.textField.isValid) {
      this.emitFunction();
    }
  }
}

方案二：手动执行验证规则 #

如果你不想依赖组件内部状态，可以手动遍历验证规则，检查输入值是否符合所有要求：

<v-text-field
    v-model="inputValue"
    :rules="validationRules"
    @blur="handleBlur"
></v-text-field>

对应的处理函数：

data() {
  return {
    inputValue: ''
  }
},
methods: {
  handleBlur() {
    // 遍历所有规则，检查是否全部通过
    const isAllRulesPassed = this.validationRules.every(rule => {
      const result = rule(this.inputValue);
      // 验证规则返回true表示通过，返回字符串则为错误提示
      return result === true;
    });

    if (isAllRulesPassed) {
      this.emitFunction();
    }
  }
}

两种方案的区别：

• 方案一更简洁，直接复用组件内部的验证结果，适合大多数场景
• 方案二更灵活，不受组件内部实现限制，适合需要自定义验证逻辑的场景

内容的提问来源于stack exchange，提问作者KorbenDose