vee-validate vue 2.0自定義表單驗證的實例
更新時間：2018年08月28日 16:32:58 作者：Game_Liang
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗證的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
親測可用
學習vee-validate，首先可以去閱讀官方文檔，更為詳細可以閱讀官網(wǎng)中的規(guī)則。
一、安裝
您可以通過npm或通過CDN安裝此插件。
1. NPM
npm install vee-validate --save
2. CDN
<script src="path/to/vue.js"></script> <script src="path/to/vee-validate.js"></script> <script> Vue.use(VeeValidate); // good to go. </script>
或者你可以使用ES6導入它：
import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);
二、使用中文提示
沒有配置過的錯誤提示默認使用英文顯示的，如果想要用中文顯示需要我們手動配置一下，首先還是在main.js中引入
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn', cn);
三、修改默認的錯誤提示信息
// 修改默認錯誤提示
const dict = {
cn: {messages: {required: (name) => `${name}不能為空!`}} // name接受alias的值.
}
Validator.localize(dict);
demo中修改了required的錯誤提示信息，因為使用的中文（前面引入的），所以是cn。最后用localize方法加入到Validator中。
四、使用自定義規(guī)則
Validator.extend('mobile', {
getMessage: field => "請輸入正確的手機號碼",
validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
extend的第一個參數(shù)就是自定義的規(guī)則的名字，可以像使用默認規(guī)則一樣使用它，getMessage中是錯誤提示信息，validate是驗證規(guī)則，返回一個布爾值或promise.
完整例子
<template>
<div class="">
<form @submit.prevent="applyCoupon" class="">
<label class="">手機號</label>
<p class="">
<input v-model="phone" name="phone" :class="" type="text"
placeholder="請輸入手機號"><br>
<span v-show="errors.has('phone')" class="error">{{ errors.first('phone') }}</span>
</p>
<label class="">姓名</label>
<p class="">
<input v-model="name" name="name" :class="" type="text"
placeholder="請輸入手機號"><br>
<span v-show="errors.has('name')" class="error">{{ errors.first('name') }}</span>
</p>
<p class="">
<button type="submit" class="" name="button">確定</button>
</p>
</form>
</div>
</template>
<script>
import VeeValidate, {Validator} from 'vee-validate';
import cn from 'vee-validate/dist/locale/zh_CN';
Validator.localize('cn', cn);
const dict = {
cn: {messages: {required: (name) => `${name}不能為空!`}}
}
Validator.localize(dict);
export default {
name: 'coupon-example',
validator: null,
data: () => ({
phone: '',
name: '',
errors: null
}),
computed: {},
methods: {
applyCoupon() { // 提交執(zhí)行函數(shù)
this.validator.validate('name', this.name).then((result) => this.discounted = result);
this.validator.validate('phone', this.phone).then((result) => this.discounted = result);
}
},
created() {
this.validator = new Validator({});
Validator.extend('mobile', {
getMessage: field => "請輸入正確的手機號碼",
validate: value => value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
});
Validator.extend('name', {
getMessage: field => "請輸入正確姓名",
validate: value => value == 'tom'
});
this.validator.attach({name: 'name', rules: 'required|name', alias: '姓名'});
this.validator.attach({name: 'phone', rules: 'required|mobile', alias: '手機'});
// 使用attach以FieldOptions作為其第一個參數(shù)的方法添加驗證規(guī)則。
this.$set(this, 'errors', this.validator.errors);
}
};
</script>
<style>
.error {
font-size: 12px;
color: #ff1c13;
}
</style>
以上這篇vee-validate vue 2.0自定義表單驗證的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue.js 是用于構建交互式的 Web 界面的庫。這篇文章主要介紹了Vue表單實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)
網(wǎng)上有不少使用mockjs模擬數(shù)據(jù)的文章，但基本都是本地攔截請求返回數(shù)據(jù)，本文主要介紹了vue-cli實現(xiàn)異步請求返回mock模擬數(shù)據(jù)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點勾選和父節(jié)點勾選等常見問題,通過逐步實現(xiàn)這些功能,您可以構建功能強大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關知識感興趣的朋友一起看看吧2023-12-12
element ui循環(huán)調(diào)用this.$alert 消息提示只顯示最后一個
這篇文章主要介紹了element ui循環(huán)調(diào)用this.$alert 消息提示只顯示最后一個，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了vue中this.$parent的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
van-picker組件default-index屬性設置不生效踩坑及解決
這篇文章主要介紹了van-picker組件default-index屬性設置不生效踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
頁面內(nèi)錨點定位及跳轉(zhuǎn)方法總結（推薦）
這篇文章主要介紹了頁面內(nèi)錨點定位及跳轉(zhuǎn)方法總結，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue提示框組件vue-notification使用詳解,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。這篇文章主要介紹了web前端vue：vuex單獨一文件使用方式,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了解決vue3打包過后空白頁面的情況，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09