Vue3迁移Vuelidate根校验与表单校验结果不一致问题

核心原因 #

Vue3版本的Vuelidate根校验对象(this.v$)会监听所有在校验规则中声明的字段，包括根级别字段和嵌套分组内的字段。如果存在以下情况，会导致根$invalid持续为true：

• 校验规则中声明的字段未在组件响应式状态（data/reactive）中初始化值
• 根级别存在未绑定到模板、也未赋值的校验字段
• 使用了不兼容Vue3的旧版Vuelidate包

解决办法 #

• 初始化所有校验字段：确保响应式状态中，所有在校验规则里出现的字段都有初始值（哪怕是空字符串''、null或符合规则的默认值）。示例：

  import { reactive } from 'vue'
  import { useVuelidate } from '@vuelidate/core'
  import { required, email } from '@vuelidate/validators'
  
  export default {
    setup() {
      // 初始化所有校验字段
      const state = reactive({
        form: {
          username: '',
          email: ''
        },
        // 根级别字段也要初始化
        rememberMe: false
      })
  
      const rules = {
        form: {
          username: { required },
          email: { required, email }
        },
        rememberMe: { required }
      }
  
      const v$ = useVuelidate(rules, state)
      return { v$, state }
    }
  }
  

• 规范校验规则结构：尽量把表单字段都嵌套在统一的分组（比如form）内，避免根级别零散字段，这样根校验对象的状态会和分组保持一致，也便于维护。

• 重置根校验状态：如果页面加载时根校验就处于无效状态，可在组件挂载后手动重置：

  import { onMounted } from 'vue'
  
  setup() {
    // ... 其他代码
    const v$ = useVuelidate(rules, state)
    
    onMounted(() => {
      v$.$reset()
    })
  
    return { v$, state }
  }
  

• 确认Vuelidate版本：确保安装的是Vue3适配版本：

  # 卸载旧版（如果有）
  npm uninstall vuelidate
  # 安装新版
  npm install @vuelidate/core @vuelidate/validators
  

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