如何延迟Vuelidate校验至远程API数据加载完成

你遇到的初始加载阶段误判invalid的问题，是因为Vuelidate默认在组件初始化时就会对绑定的表单值执行校验，此时API数据还没返回、表单字段为空，自然会触发required规则的报错，有两种成熟的实现方案可以解决：

方案1：懒加载校验模式（最适配异步初始化场景） #

通过$lazy配置关闭Vuelidate的初始化自动校验，等数据加载完成后再手动启动校验，逻辑最清晰：

• 新增表单加载状态标记isFormLoading，初始值设为true
• 初始化Vuelidate时传入第三个配置项，开启$lazy: true，禁止组件挂载阶段自动执行校验
• API请求完成、所有表单初始值赋值完毕后，将isFormLoading设为false，调用Vuelidate实例的$validate()方法执行首次校验即可
• 模板层的错误状态绑定要加加载状态判断，加载阶段不传递错误状态给输入组件

核心实现代码：

<script setup>
import { ref, onMounted } from 'vue'
import useVuelidate from '@vuelidate/core'
import { required } from '@vuelidate/validators'

const formData = ref({
  // 表单字段初始值先留空
  name: '',
  phone: ''
})
// 表单加载标记
const isFormLoading = ref(true)

// 校验规则
const rules = {
  name: { required },
  phone: { required }
}
// 开启懒校验，关闭初始化自动执行
const v$ = useVuelidate(rules, formData, { $lazy: true })

onMounted(async () => {
  // 拉取API初始数据
  const initData = await fetch('/api/form/init').then(res => res.json())
  // 赋值给表单
  Object.assign(formData.value, initData)
  // 加载完成，启动首次校验
  isFormLoading.value = false
  v$.value.$validate()
})
</script>

<template>
  <q-input
    v-model="formData.name"
    label="姓名"
    :error="!isFormLoading && v$.name.$error"
    :error-message="v$.name.$errors[0]?.$message"
  />
  <q-input
    v-model="formData.phone"
    label="手机号"
    :error="!isFormLoading && v$.phone.$error"
    :error-message="v$.phone.$errors[0]?.$message"
  />
</template>

方案2：基于脏状态控制校验触发 #

如果不想全局开启懒校验，可以利用Vuelidate的脏检查机制实现：默认情况下字段没有被标记为dirty（已交互/已激活）时，即使值不符合规则也不会抛出错误。
实现逻辑：

• 初始化Vuelidate时配置$autoDirty: true，仅在字段被标记为脏状态后才展示校验错误
• API数据加载完成、表单赋值结束后，调用Vuelidate实例的$touch()方法，统一将所有字段标记为可校验状态
• 这种方式不需要额外维护加载状态的错误判断，只要不调用$touch()，初始空值阶段就不会显示invalid提示

踩坑提示：如果直接把Vuelidate的$invalid属性不加判断绑定给Quasar QInput的error属性，就算Vuelidate本身不触发错误提示，组件也会显示错误红框，一定要确保加载阶段不把校验状态传递给组件。

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