VeeValidate是什么：
VeeValidate是Vue.js的驗(yàn)證庫，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則。它基于模板，因此它與HTML5驗(yàn)證API相似并且很熟悉。您可以驗(yàn)證HTML5輸入以及自定義Vue組件。它也是以本地化為基礎(chǔ)構(gòu)建的，實(shí)際上我們有大約44種語言由精彩的社區(qū)成員支持和維護(hù)。
本文包含VeeValidate包含以下幾點(diǎn)應(yīng)用：
1、基本安裝使用
2、本地化支持
3、自定義規(guī)則和錯誤消息
4、驗(yàn)證HTML5輸入和自定義Vue組件
5、統(tǒng)一提交按鈕處理
先看看頁面效果：
如果要看gif效果的可以在我的github（https://github.com/HongqingCao/My-Code/tree/master/VeeValidate）觀看，并提供有實(shí)例源碼下載，下面步入主題：
基本安裝使用
VeeValidate的使用支持兩種方式： 一種是：NPM/yarn（npm install vee-validate --save）， 一種是：CDN。
本文是以CDN的方式引用：
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script> <script type="text/javascript" src="js/vue.min.js" ></script> <script type="text/javascript" src="js/vee-validate.min.js" ></script> <script type="text/javascript" src="js/zh_CN.js" ></script>
注釋：引入了四個js文件，前面兩個略講，后面的兩個分別是vee-validata和zh_CN中文語言包文件
html頁面部分：
<p class="enroll" id="recommend-box">
<p class="title">請?zhí)顚懩]購的書籍信息：</p>
<p class="content">
<p class="info infoa">
<p class="group-input">
<span class="a">書 名：</span>
<input v-model="title" v-validate="'required'" data-vv-as="書名" type="text" name="title" placeholder="請輸入推薦書名" />
</p>
<p class="errors" v-show="errors.has('title')" v-cloak>{{ errors.first('title') }}</p>
</p>
<p class="info infoa">
<p class="group-input">
<span class="a">作 者：</span>
<input v-model="author" v-validate="'required'" data-vv-as="作者" type="text" name="author" placeholder="請輸入作者" />
</p>
<p class="errors" v-show="errors.has('author')" v-cloak>{{ errors.first('author') }}</p>
</p>
<p class="info infoa">
<p class="group-input">
<span class="a">出版社：</span>
<input v-model="publisher" v-validate="'required'" data-vv-as="出版社" type="text" name="publisher" placeholder="請輸入出版社" />
</p>
<p class="errors" v-show="errors.has('publisher')" v-cloak>{{ errors.first('publisher') }}</p>
</p>
<p class="info infob">
<p class="group-input">
<span class="a">出版年：</span>
<input v-model="pubYear" v-validate="'required|pubYear|digits:4'" data-vv-as="出版年" type="text" name="pubYear" placeholder="請輸入出版年" />
</p>
<p class="errors" v-show="errors.has('pubYear')" v-cloak>{{ errors.first('pubYear') }}</p>
</p>
<p class="info infob">
<p class="group-input">
<span class="a">語言類型：</span>
<input v-model="type" v-validate="'required'" data-vv-as="語言類型" type="text" name="type" placeholder="語言類型" />
</p>
<p class="errors" v-show="errors.has('type')" v-cloak>{{ errors.first('type') }}</p>
</p>
<p class="info infob">
<p class="group-input">
<span class="a">ISBN號：</span>
<input v-model="isbn" v-validate="'required|isbn'" data-vv-as="ISBN號" type="text" name="isbn" placeholder="ISBN號" />
</p>
<p class="errors" v-show="errors.has('isbn')" v-cloak>{{ errors.first('isbn') }}</p>
</p>
<p class="info infob more">
<p class="group-input">
<span class="a">推薦理由：</span>
<textarea v-model="remark" v-validate="'max:200'" data-vv-as="推薦理由" type="text" name="remark" placeholder="請輸入推薦理由"></textarea>
</p>
<p class="errors" v-show="errors.has('remark')" v-cloak>{{ errors.first('remark') }}</p>
</p>
<p class="info info-btn">
<p class="btton" @click="validateBeforeSubmit()">提交</p>
</p>
</p>
</p>注釋：這邊包含以下幾個VeeValidate知識點(diǎn)：
1、input/textarea標(biāo)簽中的 v-validate、data-vv-as、name 屬性。（v-model我這里是雙向綁定，方便把這些參數(shù)傳遞給接口請求，不做過多介紹） 2、錯誤提示標(biāo)簽里面的 v-show="errors.has('remark')" 和**{{ errors.first('remark') }}**
v-validate：
v-validate指令添加到您希望驗(yàn)證的輸入中，并確保您的輸入具有name用于生成錯誤消息的屬性。 然后，傳遞給指令一個rules字符串，其中包含由管道' |' 分隔的驗(yàn)證規(guī)則列表。比如上面的 出版年 份的校驗(yàn)，使用 required 這個選項(xiàng)是必填項(xiàng)， pubYear 以表明該字段必須為年的格式（當(dāng)然這里是自定義的），digits:4，數(shù)字長度是4。要結(jié)合這兩個規(guī)則，我們指定字符串值required|pubYear|digits:4的v-validate表達(dá)式的值。
data-vv-as：
當(dāng)為這個輸入生成任何錯誤消息時，它將使用該data-vv-as值而不是實(shí)際的字段名稱，默認(rèn)的錯誤提示都是英文，如果你設(shè)置了這個，錯誤提示字段名稱它會提示data-vv-as值
v-show="errors.has('remark')
默認(rèn)錯誤提示的標(biāo)簽不加載出來
errors.first('remark')
獲取關(guān)于當(dāng)前remark的第一個錯誤信息
js部分：
<script type="text/javascript">
var IndexPage = "http://localhost:8080/xxxx.html"
var AuthCode = "12131";
$(function () {
recommend(AuthCode);
})
VeeValidate.Validator.localize('zh_CN');
Vue.use(VeeValidate);
VeeValidate.Validator.localize({
zh_CN: {
messages: {
required: function (name) { return name + '不能為空' },
}
}
})
VeeValidate.Validator.extend('isbn',{
getMessage: function () { return " 請輸入正確格式的isbn號" },
validate: function (value) { return /^[\d-]*$/.test(value);}
})
VeeValidate.Validator.extend('pubYear', {
getMessage: function () { return " 請輸入正確的年份" },
validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
})
function recommend(AuthCode) {
var classList = new Vue({
el: '#recommend-box',
data: function () {
return {
title: "",
author: "",
publisher: "",
pubYear: "",
type: "",
remark: "",
isbn: ""
}
},
methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
$.ajax({
url: '/xxxx',
data: {
Request: "xxxxx",
title: this.title,
author: this.author,
publisher: this.publisher,
pubYear: this.pubYear,
type: this.type,
remark: this.remark,
isbn: this.isbn,
certId: AuthCode
},
type: 'POST',
dataType: "json",
success: function (data) {
var msg = data.msg;
alert(msg);
window.location.href = IndexPage;
}
});
return;
}
alert("請輸入完整推薦信息！")
});
}
}
})
}
</script>好，接下來我們一起來讀一下這個代碼
VeeValidate.Validator.localize('zh_CN');
Vue.use(VeeValidate);注釋：這以上代碼的意思是 1、改變成zh_CN中午的語言環(huán)境，如果不改默認(rèn)提示是英文 2、安裝VeeValidate插件，也可以理解是初始化
VeeValidate.Validator.localize({
zh_CN: {
messages: {
required: function (name) { return name + '不能為空' },
}
}
})注釋：上代碼修改默認(rèn)提示語，name屬性加不能為空，也就是必填項(xiàng)的非空判斷
VeeValidate.Validator.extend('isbn',{
getMessage: function () { return " 請輸入正確格式的isbn號" },
validate: function (value) { return /^[\d-]*$/.test(value);}
})
VeeValidate.Validator.extend('pubYear', {
getMessage: function () { return " 請輸入正確的年份" },
validate: function (value) { return /^(19|20)\d{2}$/.test(value); }
})注釋：上代碼修改自定義規(guī)則 getMessage ： 提示語。 validate： 就是匹配規(guī)則，通常就正則咯。
validateBeforeSubmit() {
this.$validator.validateAll().then((result) => {
if (result) {
//這里寫具體的接口請求
alert("推薦成功！")
return;
}
alert("請輸入完整推薦信息！")
}
}注釋：上代碼創(chuàng)建一個提交按鈕事件，監(jiān)聽是否正常填寫選項(xiàng)，實(shí)現(xiàn)校驗(yàn)
一個完整的校驗(yàn)應(yīng)用案例到這里已經(jīng)講解的差不多了，小伙伴們可以根據(jù)自己的實(shí)際情況應(yīng)用在自己的項(xiàng)目中，如果需要深入了解，可以移步到官網(wǎng)https://baianat.github.io/vee-validate/guide/。
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！
推薦閱讀：
如何操作Vue內(nèi)使用vee-validate
Node.js筆記process模塊使用詳解
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
