vue项目中使用vee-validate+element-ui完成表单校验

安装vee-validate：

npm install vee-validate --save
或者
yarn add vee-validate
两种使用方法：
一、在vue项目中main.js文件中直接使用

import Vue from 'vue';
import { ValidationObserver,ValidationProvider， extend} from 'vee-validate';
import { required } from 'vee-validate/dist/rules';
extend('email', {
    ...email,
  	message: '请输入正确邮箱' //这里写你要提示的错误信息
});
// 注册全局组件（也可以哪个vue文件使用，在哪注册即可）
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

二、封装成单独的js文件
在vue项目中src/common下创建validate.js文件

validate.js:

import { extend } from 'vee-validate'
//extend扩展，官网有很多封装好的，不过需改成中文提示语句
extend('email', {
	...email,
	message: '请输入正确邮箱',
})

在main.js引入

import { ValidationObserver, ValidationProvider} from 'vee-validate';
import './common/validate'
// 注册全局组件（也可以哪个vue文件使用，在哪注册即可）
Vue.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

以上任意一种都可以，根据自身情况实现。个人更偏向第二种，跟符合组件化开发。
接下来，在任意组件使用：

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

<script>
export default {
    data(){
        return{
            email:''
        }
    }
}
</script>

打开页面，输入框中随意输入，弹出错误信息：

我们看到这个样式完全不是我们想要的，这里我们使用element-ui来实现ui效果，vee-validate官网也有列举。这里不进行详细介绍，根据自身情况选择使用。

element-ui

npm i element-ui -S

在main.js中：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 挂载elementui
Vue.use(ElementUI)

接下来我们就可以随意使用element-ui在组件上，结合el-form中表单验证样式效果就能达成我们想要的验证效果。在组件上：

<el-form ref="form" label-width="120px">
       <ValidationProvider rules="email" v-slot="{ errors }">
         <el-form-item :error="errors[0]" label="Email">
           <el-input v-model="email"></el-input>
         </el-form-item>
      </ValidationProvider>
</el-form>

样式已经完全达到我们想到的效果，这里可能会疑问为什么我们不直接使用el-form的表单校验算了，而去使用vee-validate第三方插件来完成。

其实在我们在实际写项目中，在表单验证规则这里花费了大量精力，我们作为开发者应该把花在定制表单验证解决方案上的时间最好花在构建应用程序逻辑上，这块方法只是演示了其中的一部分方法，要想实际熟练使用此插件，需要去vee-valida官网进一步学习。