如何确定Vuetify的v-text-field中哪条校验规则未通过？

有办法确定具体哪条校验规则未通过，以下是两种可行方案：

方案一：自定义规则结构，主动追踪验证结果 #

通过改造规则的结构，给每条规则添加名称标识，手动执行验证并记录失败的规则：

修改后代码示例 #

<template>
  <div>
    <v-form v-model="valid" ref="form">
      <v-text-field
        v-model="model"
        type="number"
        label="Fetch Frequency"
        :rules="rules.map(item => item.validator)" 
        min="100"
        suffix="seconds"
        @change="trackFailedRules"
        @blur="trackFailedRules"
      ></v-text-field>
    </v-form>
    <!-- 显示未通过的规则 -->
    <div v-if="failedRules.length > 0" class="red--text">
      未通过的规则：{{ failedRules.join(', ') }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "",
      valid: false,
      failedRules: [],
      // 给每条规则添加名称标识
      rules: [
        { 
          name: "loanMin", 
          validator: v => (v && v >= 100) || "minimum interval is 100 seconds" 
        },
        { 
          name: "required", 
          validator: v => !!v || "Required." 
        }
      ]
    };
  },
  methods: {
    trackFailedRules() {
      this.failedRules = [];
      // 遍历规则，逐个验证并收集失败项
      this.rules.forEach(rule => {
        const validateResult = rule.validator(this.model);
        if (typeof validateResult === "string") {
          this.failedRules.push(rule.name);
        }
      });
      // 同步触发表单整体验证
      this.$refs.form.validate();
    }
  }
};
</script>

方案二：通过组件ref匹配错误信息与规则 #

利用v-text-field的ref获取组件内部的错误信息，反向匹配对应的规则名称：

修改后代码示例 #

<template>
  <div>
    <v-form v-model="valid">
      <v-text-field
        ref="frequencyField"
        v-model="model"
        type="number"
        label="Fetch Frequency"
        :rules="[rules.loanMin, rules.required]" 
        min="100"
        suffix="seconds"
        @input="checkFailedRule"
        @blur="checkFailedRule"
      ></v-text-field>
    </v-form>
    <!-- 显示未通过的规则 -->
    <div v-if="failedRule" class="red--text">
      当前未通过的规则：{{ failedRule }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: "",
      valid: false,
      failedRule: null,
      rules: {
        required: v => !!v || "Required.",
        loanMin: v => (v && v >= 100) || "minimum interval is 100 min"
      }
    };
  },
  methods: {
    checkFailedRule() {
      const field = this.$refs.frequencyField;
      if (!field || field.errors.length === 0) {
        this.failedRule = null;
        return;
      }
      // 匹配错误信息对应的规则
      const currentError = field.errors[0];
      for (const [ruleName, ruleFunc] of Object.entries(this.rules)) {
        const ruleError = ruleFunc(this.model);
        if (ruleError === currentError) {
          this.failedRule = ruleName;
          break;
        }
      }
    }
  }
};
</script>

注意事项 #

Vuetify的校验规则是按顺序执行的，一旦某条规则验证失败，后续规则会停止执行，因此组件的errors数组中只会保留第一条失败的规则信息。

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