前言

VeeValidate是一个表单验证插件，截止目前VeeValidate3.x版本已经非常成熟，但是网上的文档大部分都是2.x版本的，与3.x差别较大，所以我在此写一下VeeValidate3.x如何使用。

安装

npm(推荐)
npm install vee-validate --save
yarn
yarn add vee-validate
jsdelivr cdn
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js"></script>
unpkg
<script src="https://unpkg.com/vee-validate@latest"></script>

基础使用

main.js

import Vue from 'vue'
import { ValidationProvider, extend } from 'vee-validate'

// 添加规则
extend('secret', {
  validate: value => value === 'example',
  message: 'This is not the magic word'
})

// 注册为全局组件
Vue.component('ValidationProvider', ValidationProvider)

xx.vue

<ValidationProvider rules="secret" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

注：xx.vue中的rules="secret"对应mai.js中添加的规则secret。VeeValidate默认没有规则。

进阶用法

对同一个组件使用多种规则校验

<ValidationProvider rules="secret|required" v-slot="{ errors }">
  <input v-model="email" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

使用官方默认校验规则

import { required, email } from 'vee-validate/dist/rules'
extend('required', required)
extend('email', email)

修改默认规则的message

extend('email', {
  ...email,
  message: '请输入正确的邮箱格式'
})

为多个组件设置相同的校验规则且message不同

eg. "用户名为必填项"，"密码为必填项"

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

extend('required', {
  ...required,
  message: '{_field_}不能为空'
})

给校验规则传参

单个参数

<ValidationProvider rules="required|len:6" name="密码" v-slot="{ errors }">
  <input v-model="pwd" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

extend('required', {
  ...required,
  message: '{_field_}不能为空'
})
extend('len', {
  validate (value, args) {
    return value.length === parseInt(args.leng)
  },
  params: ['leng'],
  message: '{_field_}长度为6'
})

多个参数

<ValidationProvider rules="required|range:4,6" name="密码" v-slot="{ errors }">
  <input v-model="pwd" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

extend('range', {
  validate (value, args) {
    return value.length >= parseInt(args.min) && value.length <= parseInt(args.max)
  },
  params: ['min', 'max'],
  message: '{_field_}长度为4-6'
})

结语

VeeValidate3.x还有更复杂的功能，目前这些就基本够用了。如果我后续遇到了需要使用更复杂功能的时候，会在此更新。

VeeValidate3.x使用手册

前言

安装