Vue2使用Vuelidate表单验证报错：_vm.$v.form未定义

在Vue2项目中使用Vuelidate实现表单验证时，控制台出现两个报错：Error in render: "TypeError: _vm.$v.form is undefined" 和 _vm.$v.form is undefined。此前在其他组件/页面中实现过相同功能未出现错误，自查代码未发现问题。

全局引入Vuelidate代码 #

import Vue from 'vue'
import Vuelidate from 'vuelidate'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.config.productionTip = false
export const show = new Vue()
Vue.use(Vuelidate)
Vue.use(VueAxios, axios)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注册页面表单代码 #

<form @submit.prevent="submitHandler" class="authentication-template__form" action="">
    <div class="authentication-template__form-item">
        <p>Пароль</p>
        <input 
        type="password"
        v-model.trim="form.password"
        :class="$v.form.phone.$error ? 'invalid' : ''"
        >
        <!--<p v-if="$v.form.password.$dirty && !$v.form.password.required" class="invalid-feedback">Обязательное поле для заполнения</p>-->
    </div>
    <div class="authentication-template__form-item">
        <p>Повторите пароль</p>
        <input 
        type="password"
        v-model.trim="form.repeatPassword"
        >
        <!--<p v-if="$v.form.repeatPassword.$dirty && !$v.form.repeatPassword.required" class="invalid-feedback">Обязательное поле для заполнения</p>-->
    </div>
    <div class="authentication-template__button">
        <button class="button" type="submit">
            {{buttonText}}
        </button>
    </div>
</form>

组件脚本代码 #

import { required, minLength, sameAs } from 'vuelidate/lib/validators'

export default {
    data: () => ({
        name: 'registration2',
        title: 'Регистрация',
        buttonText: 'Зарегистрироваться',
        form: {
            password: '',
            repeatPassword: ''
        }
    }),
    methods: {
        submitHandler(){
            this.$v.form.$touch()
            if(!this.$v.form.$error){
                this.$router.push('/')
            }
        }
    },
    components:{
        AuthenticationTemplateRoles
    },
    validations: {
        password: {required},
        repeatPassword: {required}
    }
}

问题排查与解决方案 #

1. 验证规则层级不匹配 #

组件validations配置中，直接定义了password和repeatPassword规则，但这两个字段实际是data里form对象的子属性。Vuelidate要求验证规则的层级必须和data中的数据结构完全对应，所以需要将规则嵌套在form下：

validations: {
  form: {
    password: { required },
    repeatPassword: { required }
  }
}

2. 模板中存在错误字段引用 #

模板里的:class="$v.form.phone.$error ? 'invalid' : ''"引用了不存在的phone字段，应该改为对应password字段的验证：

:class="$v.form.password.$error ? 'invalid' : ''"

3. 提交方法的验证对象引用修正 #

在修正validations结构后，submitHandler中的this.$v.form.$touch()和this.$v.form.$error才能正确指向表单的验证对象，之前因为规则层级错误，$v.form不存在才导致报错。

完成以上修改后，重新运行项目即可解决$v.form is undefined的报错问题。

内容的提问来源于stack exchange，提问作者Алмат Алматулус