VeeValidate表单验证插件

VeeValidate

1.js逻辑部分

// 使用

// 在utils目录下新建一个 validate.js文件放置插件配置

import Vue from 'vue'

// 加载需要使用的验证组件
import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'

// 加载内置的验证规则
import * as rules from 'vee-validate/dist/rules'

// 加载中文语言包
import { messages } from 'vee-validate/dist/locale/zh_CN.json'

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

// 循环内置规则定义所有的内置验证规则
Object.keys(rules).forEach(rule => {
  extend(rule, {
    ...rules[rule],
    message: messages[rule]
  })
})

// 通过 extend(String) 自定义验证规则， 第一个参数是自定义验证规则的名称，第二个参数可以是一个函数，也可以是一个对象

extend('mobile', value => {

  if (value >= 0) {
    return true;
  }

  return '{_field_}不能为空'
})


// 如果需要多个配置的话，第二个参数应该为对象

extend('mobile', {
    
    // 第一个参数是文本框的值，第二个参数是验证规则传过来的参数
  validate: (value, args) => {
    console.log(args)
    return /^1(3|5|6|7|8|9)d{9}$/.test(value)
  },
    
    // 错误信息提示
  message: '{_field_}格式有误',

  params: ['min', 'max', 'sex']
})

// _field_：是ValidationProvider上面的name属性字段


// 如果错误信息提示为字符串不够灵活也可以写成函数

extend('mobile', {

  validate: (value, args) => {
    console.log(args)
    return /^1(3|5|6|7|8|9)d{9}$/.test(value)
  },

    // 第一个参数就是name字段，第二个参数是传递进来的参数
  message: (fieldName, placeholders) => {

    return `${fieldName}格式有误${placeholders.min}`
  }
  params: ['min', 'max', 'sex']
})

2.html模板部分

<template>

    <!-- 

        参数详解：

            1.name：信息提示的字段名称

            2.rules：绑定自定义验证的规则

            3.v-slot：可以拿到错误提示的信息

            4.bails：Boolean类型，为true只能拿到一条错误信息，false可以拿到所有的错误提示信息，注意错误信息是一个数组
     -->
        

    <!-- 包裹整个表单验证 -->
    <ValidationObserver ref="form">
        
        <!-- 包裹每一个验证的表单元素 -->
        <ValidationProvider

            name: '手机号',

            rules="required|mobile:3,6,7"

            v-slot="v"
    
        >

            <input type="text" v-model="username" />

            <span style="color: red;">{{ v.errors[0] }}</span>
    
        </ValidationProvider>
    <ValidationObserver/>
<template>

3.手动验证

// 比如我们点击提交按钮之后再做一次验证

// 用来单独验证某一个字段
import { validate } from 'vee-validate'

// this.$refs.form拿到最外层包裹的实例调用validate手动验证

const success = await this.$refs.form.validate()

if (!success) {

     const errors = this.$refs.form.errors

     // 如果item[0]是空数组的话说明是验证成功的，里面没有错误信息

    // 反之就是没有验证通过的返回返回，在提示出来

    const item = Object.values(errors).find(item => item[0])

    this.$toast(item[0])

    return
}