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.component('ValidationObserver', ValidationObserver);
Vue.component('ValidationProvider', ValidationProvider);

二、封裝成單獨的js檔案
在vue專案中src/common下建立validate.js檔案

validate.js:

import { required} from 'vee-validate/dist/rules'
import { extend } from 'vee-validate'
extend('email', {
	...email,
	message: '請輸入正確郵箱',
})

在main.js引入

import { ValidationObserver, ValidationProvider} from 'vee-validate';
import './common/validate'
// 全域性註冊
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官網進一步學習。