VeeValidate 3.x 基本用法

Posted 2023-05-08

参考技术A

VeeValidate 是一个轻量级的表单验证插件，内置了丰富的校验规则和错误提示，而且非常容易扩展，下面简单介绍它的使用方法

template

script

ValidationProvider 会自动在其子孙结点中查找具有 v-model 、 :value 的输入框并进行校验。 tag 指定 <ValidationProvider> 渲染成的html元素。 name 指定字段的名字，通过 name 还可以配置字段名的多语言版本，如果没有为 ValidationProvider 提供 name ，则字段名默认为输入框的 id 或者 name 属性。 rules 指定校验规则，应用多个规则用 | 隔开， vee-validate 内置了许多校验 规则 ，还可以通过 extent 自定义规则。

一个项目中可能出现很多相同的输入框，为了让校验规则在这些输入框都能生效，可以在一个单独文件中定义所有校验规则，然后在 main.js 中引入

utils/veevalidate.js

第一个参数是规则名称，第二个参数是规则的schema。如果希望在定义规则时同时定义错误消息体，可以像下面这样写

自定义规则支持传参，如 rules="required|password:6,18" 表示应用 required 和 password 两个规则，并向第二个规则传递了两个参数，接收的参数需要在 params 进行声明

vee-validate 提供 localize 方法设置语言环境

也可以在设置语言环境的同时加载该语境下的messages

默认字段名是 ValidationProvider 的 name 属性，可以通过 names 来配置其他语言版本

默认提示信息都是英文的，通过设置 messages 可以在切换语言后显示对应语言的错误提示信息。 ...zh.messages 是加载 vee-validate 内置的错误消息。 _field_ 是一个占位符，它会被 ValidationProvider 的 name 属性值所替代

vee-validate 提供了 fields 选项，可以为某个字段的每一个规则定义不同错误提示消息

如果要为不同语言构建不同应用版本，那么一次导入所有 messages 显然不是很好的选择，可以使用动态导入方式代替

在提交表单的时候需要对整个表单进行验证，这个时候需要用到 ValidationObserver 组件

template

script

vee-validate 提供了四种触发验证的方式，默认情况下用户输入时触发。

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。