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官網進一步學習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/188153.html
標籤：其他
上一篇：H5本地存盤