veevalidate@3版本用法

1、首先可以在utils新建一个veevalidate.js文件，在main.js引入

2、编辑工具，引入对应方法，自定义本地化

import { extend, localize } from 'vee-validate'
import { required, email, min, length, confirmed } from 'vee-validate/dist/rules'

// 中文
import zh from 'vee-validate/dist/locale/zh_CN.json'

extend('email', email)
extend('required', required)
extend('min', min)
extend('length', length)
extend('confirmed', confirmed)

// 本地化的自定义
//localize('zh_CN', zh)
localize('zh_CN', {
  messages: {
    ...zh.messages,
    required: '请输入{_field_}'
  },
  names: {
    email: '邮箱',
    password: '密码',
    username: '账号',
    code: '验证码'
  },
  fields: {
    email: {
      email: '请输入正确的{_field_}',
      required: '请输入{_field_}!!!'
    }
  }
})

3、在vue页面中引入vee-validate

import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'

export default {
  components: {
    ValidationProvider,
    ValidationObserver
  }
}

在html中的用法

包含属性：

name：字段名,rules：需要的验证功能,v-slot：错误提示

error[0]用于显示错误提示

<form method="post">
      <div class="layui-form-item">
         <label for="L_email" class="layui-form-label">用户名</label>
         <validation-provider name="email" rules="required|email" v-slot="{ errors }">
             <div class="layui-input-inline">
                 <input type="text" name="username" v-model="username" placeholder="请输入用户名" autocomplete="off" class="layui-input"/>
             </div>
             <div class="layui-form-mid">
                 <span style="color: #c00">{{ errors[0] }}</span>
             </div>
          </validation-provider>
       </div>
</form>