Vee验证-[Vue警告]：无法解析指令：validate

问题描述

我想验证文本字段，尝试下面的代码：

 <input v-validate="result.val=='required' ? 'required' : ''" v-model="required" :name="f_name" type="text"/>

但出现此错误：

app.js：48089 [Vue警告]：无法解析指令：验证

尝试一下：

<ValidationProvider name="phone" :rules="required" v-slot="{ errors }">
  <input class="form-control" :name="phone" type="text" v-model="form.phone"/>
  </ValidationProvider>

解决方法

根据migration guide，此指令在v3.x中已删除：

具有v-validate指令的字段现在需要由ValidationProvider组件包装，并且它们需要使用v-model正确地标记自己以进行vee验证。 所以这个：

<input type="text" name="field" v-validate="'required'">
<span>{{ errors.first('field') }}</span>

将被这样重写：

<ValidationProvider name="field" rules="required" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

您的代码应类似于：

<ValidationProvider name="f_name" :rules="result.val=='Required' ? 'required' : ''" v-slot="{ errors }">
<input v-model="required" :name="f_name" type="text"/>
</ValidationProvider>

您应该将其添加到main.js中：

import { ValidationProvider } from 'vee-validate';

Vue.component('ValidationProvider',ValidationProvider);

如果您没有使用捆绑软件，而是在浏览器或CDN中使用vee-validate：

<script>
  // ...
  Vue.component('validation-provider',VeeValidate.ValidationProvider);
  // ...
</script>