如何在Vuelidate中区分表单校验错误与警告提示

可以实现，最简便的实现方式是将警告类规则和错误类规则拆分到独立的校验分组中，完全隔离两类规则的校验状态统计。

核心逻辑：Vuelidate默认会将所有同一层级下的校验失败项计入$v.$error统计，所以我们只需要把警告类规则抽出来，放到validations配置下单独的$warn分组里，这个分组的校验状态完全独立，不会影响正常错误项的统计。

注：原示例代码中存在校验规则名拼写错误greatherThan（多了一个h），以下代码已修正。

完整可运行实现代码 #

<template>
  <div>
    <!-- 错误提示走原有正常校验分组 -->
    <div v-if="!$v.field1.required" class="error">此字段为必填项</div>
    <!-- 警告提示走独立的$warn分组 -->
    <div v-if="!$v.$warn.field1.greaterThan" class="warn">数值建议大于10</div>
    <input @blur="handleValidate" v-model="field1" type="number">
  </div>
</template>

<script>
import { required } from "vuelidate/lib/validators";

const greaterThan = (params) => (value) => value > params;

export default {
  data() {
    return {
      field1: 0
    }
  },
  validations() {
    return {
      // 错误类校验规则放主层级，会被计入$v.$error统计
      field1: {
        required
      },
      // 警告类校验规则放独立的$warn分组，不会影响主层级的错误统计
      $warn: {
        field1: {
          greaterThan: greaterThan(10)
        }
      }
    }
  },
  methods: {
    handleValidate() {
      // 同时触发两类校验的状态更新
      this.$v.field1.$touch()
      this.$v.$warn.field1.$touch()
      
      // 表单提交逻辑只判断主层级的错误即可，警告不会阻断提交
      if (this.$v.field1.$error) return
      // 后续提交逻辑...
    }
  }
}
</script>

特性说明 #

• 主层级的校验状态完全不受警告规则影响，$v.$error、$v.$invalid等属性只会统计错误类规则的校验结果
• 警告分组的校验逻辑和主层级完全一致，支持所有Vuelidate原生的方法（$touch、$reset、$pending等），可以根据业务需求独立控制触发时机
• 如果有多个字段需要配置警告规则，只需要在$warn分组下按照和主层级相同的字段结构扩展即可

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