VeeValidate 3.x 极速入门

最近开发前台项目有表单校验需求，因之前做的项目大多都是后台管理系统，用的都是ant-design组件库里的表单校验功能，懵懂的我google一下看还有什么Vue校验轮子，一番对比选择了VeeValidate。在能搜到的中文教程里基本都是基于VeeValidate 2.x写的，但VeeValidate官方版本已经更新到了3.x，作为一个有目标、有理想、有抱负、有要求的大前端当然得紧跟大版本啊。。。

安装

yarn

yarn add vee-validate

npm

npm install vee-validate --save

使用

局部导入需要用到的组件及校验规则（需要全局注册组件请参考官方README）：

import { extend, ValidationProvider, ValidationObserver } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

// 新增一个required校验规则
extend('required', {
  ...required,      // 官方自带的校验规则
  message: '必填项!!!' // 自定义错误消息 
})

// 你也可以直接沿用官方默认规则，但要设置本地化才会提示中文消息
// https://logaretm.github.io/vee-validate/guide/localization.html#i18n
// extend('required', required)

// 新增一个email校验规则，使用官方默认错误消息
extend('email', email)

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
  }
}

官方内置常用校验规则

ValidationProvider组件

假设我们要校验一个绑定Email的input：

<input v-model="email" type="text">

直接用ValidationProvider组件包裹input，多个校验规则在rules属性里用"|"分隔，错误消息通过v-slot属性传递errors数组：

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

输出：

<span>
  <input type="text">
  <span>这里是出错消息哦</span>
</span>

ValidationProvider默认会使用span包裹内容，如果想用其它html标签请使用tag属性：

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

输出：

<div>
  <input type="text">
  <span>这里是出错消息哦</span>
</div>

虽然在使用ValidationProvider组件时通常需要使用v-model，但有时候并不是必需(例如上传文件)，这种情况你可以使用手动校验方法来避免使用v-model。

<ValidationProvider
  rules="required|ext:jpg,png,gif|size:5120"
  v-slot="{ validate, errors }"
  tag="div"
>
  <input type="file" @change="handleFileChange($event) && validate($event)">
  <span v-if="errors[0]">{{errors[0]}}</span>
</ValidationProvider>

ValidationObserver组件

如何判断整个表单的当前状态？

<template>
  <div>
    <ValidationObserver tag="form" ref="obs">
    
      <ValidationProvider rules="required" v-slot="{ errors }">
        <input type="text" v-model="field1" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider rules="required" v-slot="{ errors }">
        <input type="text" v-model="field2" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>      
      
      <button @click="submit">提交</button>
      
    </ValidationObserver>
  </div>
</template>

<script>
export default {
  methods: {
    async submit () {
      const isValid = await this.$refs.obs.validate()
      if (!isValid) {
        // 如果没有通过校验执行...
      }

      // 通过校验后执行...
    }
  }
};
</script>

交互模式

提拱四种交互模式

Aggressive（默认）：当用户按键时触发(on input)
Passive：当表单提交时触发
Lazy：当用户离开输入时触发(on blur or change)
Eager：Aggressive 和 Lazy 的组合，当用户离开输入时，它首先进行校验(on blur or change)，如果输入无效，它将以Aggressive模式进行校验，直到输入再次有效，它将回到Lazy模式

<ValidationProvider
  mode="lazy"
  rules="required"
  v-slot="{ errors }"
>
  <!-- Some input -->
</ValidationProvider>

占位符

例如我想每一个required校验规则错误提示消息都不一样,可以定义规则时message定义使用{field}占位符,ValidationProvider添加name属性定义错误提示消息：

<ValidationProvider name="请输入联系方式" rules="required" v-slot="{ errors }">
   <input type="text" v-model="phone" >
   <span v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
                  
                  
extend('required', {
  ...required,
  message: '{_field_}'
})

最后

到这里相信你已经大概了解这货的基本操作，最后送上一个Demo，让你不再懵懂：

enjoy life

安装

yarn

npm

使用

ValidationProvider组件

ValidationObserver组件

交互模式

占位符

最后

评论