关于 vue项目中的表单验证组件（VeeValidate 3.x版本的使用）

• VeeValidate 官方文档

  VeeValidate 官方文档

• 下载

  npm 方式
  npm install vee-validate --save
  yarn 方式
  yarn add vee-validate

• 使用

  使用步骤
  1.0 导入验证组件 ValidationProvider，以及 extend模块
2.0 按需导入验证规则（验证组件所提供的，入email,required）
3.0 根据具体情况选择 全局注册 还是 局部注册 的方式使用 验证组件
4.0 使用验证组件

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

  全局注册组件(main.js)

  import { ValidationProvider, extend } from "vee-validate";
  import { required, email } from "vee-validate/dist/rules";
  extend("email", {
     ...email,
     message:'请输入正确的邮箱地址'
  });
  extend("required", {
   ...required,
   message: "必填"
  });
  Vue.component('ValidationProvider', ValidationProvider);
  

  局部注册组件(在组件内部注册 ,xxx.vue)

  import { ValidationProvider, extend } from "vee-validate";
  import { required, email } from "vee-validate/dist/rules";
  extend("email", {
      ...email,
      message:'请输入正确的邮箱地址'
  });
  extend("required", {
    ...required,
    message: "必填"
  });
  //---------------------局部注册组件的方式-------------------
  export default {
  	 components: {
  		ValidationProvider
  	 }
   }
  

• 自定义验证规则

  <template>
      <ValidationProvider rules="secret" v-slot="{ errors }">
    	  <input v-model="myword" type="text">
    	  <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </template>
  
  <script>
  // 导入依赖包
  import Vue from 'vue';
  import { ValidationProvider, extend } from 'vee-validate';
  // Add a rule.
  extend('secret', {
    validate: value => value === 'example',
    message: 'This is not the magic word'
  });
  export default {
    data(){
    	return {
    		myword:'' 
    	}
    }，
    components: {
    	ValidationProvider
    }
  }
  </script>
  <style>
  </style>