VeeValidate 教程

Posted 2023-05-08

参考技术A

本教程主要讲解 VeeValidate 的用法，希望通过写这篇文章可以对自己和读者带来方便

这里直接使用了 vue 的脚手架 vue cli 创建项目，具体方法参考官网 vue cli 创建项目

注册 ValidationProvider

有两种注册方法：第一种可以是直接在组件中使用 ValidationProvider 组件（推荐用法）

第二种方法是直接进行全局注册，这样单个组件中就不需要重复注册，当然实际业务中应该不会经常用到表格校验。

在组件模版中使用 ValidationProvider

增加规则

增加信息
前面长度不符合规则的默认提示显然不够友好。为了自定义提示信息，可以在 extend 函数中增加 message 属性

除了自定义规则，VeeValidate 也自带了很多规则，详细内容可参考 官方文档的详细规则 ，下面例举其中一个规则的使用方法

VeeValidate，确认规则不适用于 ValidationProvider

【中文标题】VeeValidate，确认规则不适用于 ValidationProvider

【英文标题】：VeeValidate, Confirmed rule not working on ValidationProvider

【发布时间】：2019-08-02 04:05:06

【问题描述】：

我正在尝试在密码验证提供者上添加 vee-validate 规则并确认密码。 v-validate 必须在我必须向文本框添加规则的地方工作。但就我而言，我必须使用验证提供程序。请帮忙！！！

版本

vee-validate: 2.1.7
vue: 2.9.6

代码

<ValidationObserver ref="adminInfo">
<v-layout row wrap>
<v-flex xs12 md6>
    <ValidationProvider name="password" rules="required|min:5|max:35" ref="password">
    <v-text-field
      solo
      v-model="administratorInfo.newPassword"
      label="Set New Password"
      required

      slot-scope="
          errors,
          valid
        "
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
  <v-flex xs12 md6>
    <ValidationProvider name="confirm password" rules="'required|confirmed:password'">
    <v-text-field
      solo
      v-model="administratorInfo.cNewPassword"
      label="Confirm Password"
      required
      slot-scope="
          errors,
          valid
        "
      :error-messages="errors"
      :success="valid"
    ></v-text-field>
    </ValidationProvider>
  </v-flex>
</v-layout>
</ValidationObserver>

得到错误：

无法读取未定义的属性“$watch”

【参考方案1】：

通过将 ref="password" 替换为 vid="password" 终于找到了解决方案。找到解决方案here。

但我不明白 vid 是什么以及为什么是 vid？

【讨论】：

当使用validation-provider时，你必须使用vid而不是ref：vee-validate.logaretm.com/v2/guide/components/…

【参考方案2】：

这可能无关，但请确保您的确认密码 ValidationProvider 中有 v-model

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。