vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解(部分校驗(yàn),全部校驗(yàn))
搜索很久,沒有發(fā)現(xiàn)有關(guān)于vue+VeeValidate部分校驗(yàn)的。自己寫一個(gè)。
主要是兩個(gè)場(chǎng)景:
1. 校驗(yàn)范圍內(nèi),所有的字段。
2. 校驗(yàn)全局所有字段。
主要方法:
1.validate(fields, scope)
2. validateAll(fields)
場(chǎng)景: 遍歷得到多個(gè)列表,每一個(gè)列表都可以獨(dú)立保存當(dāng)前列表。在保存當(dāng)前列表的時(shí)候,需要校驗(yàn)當(dāng)前列表輸入框的合法性。
代碼:
<div class=" col-xs-12 col-md-6 col-lg-4" v-for="(p1,index) in carList" :key="index">
<div class="box box-success" style="margin-top: 15px;overflow: hidden;" >
<div class="col-xs-7" style="border-right:1px solid #eee;padding-top: 10px;">
<label class="col-xs-12 " style="padding: 5px 0;">車牌號(hào): <span style="font-weight: normal;word-break:break-all;">{{p1.planLicenseNo}}</span></label>
<label class="col-xs-12" style="padding: 5px 0;;">司機(jī):<span style="font-weight: normal;word-break:break-all;">{{p1.planDriver}}</span></label>
</div>
<div class="col-xs-5" style="padding-top: 10px;">
<div class="form-group" :class="{'has-error': errors.has('licenseNo' + index, 'newsletter' + index)}">
<label >實(shí)際車牌號(hào) <i class="errMsg">*</i></label>
<input type="text" class="form-control" v-model.trim="p1.licenseNo"
v-validate="{required: true}" :data-vv-scope="'newsletter' + index"
:name="'licenseNo' + index" :data-vv-as="$t('pagefield.purchase.carCode')">
<span v-show="errors.has('licenseNo' + index, 'newsletter' + index)" class="help-block">{{ errors.first('licenseNo' + index, 'newsletter' + index) }}</span>
</div>
<div class="form-group" :class="{'has-error': errors.has('actualQty' + index, 'newsletter' + index)}">
<label >實(shí)際數(shù)量(頭)<i class="errMsg">*</i></label>
<input type="text" class="form-control" v-model.trim="p1.actualQty" :data-vv-scope="'newsletter' + index"
v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planQty}"
:name="'actualQty' + index" :data-vv-as="$t('message.quantity')">
<span v-show="errors.has('actualQty' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualQty' + index, 'newsletter' + index) }}</span>
</div>
<div class="form-group" :class="{'has-error': errors.has('actualWgh' + index, 'newsletter' + index)}">
<label>總重(kg) <i class="errMsg">*</i></label>
<input type="text" class="form-control" v-model.trim="p1.actualWgh" :data-vv-scope="'newsletter' + index"
v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planWgh}"
:name="'actualWgh' + index" :data-vv-as="$t('message.weight')">
<span v-show="errors.has('actualWgh' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualWgh' + index, 'newsletter' + index) }}</span>
</div>
<div class="form-group">
<label>過(guò)磅單</label>
<input type="text" class="form-control" v-model.trim="p1.weightNo">
</div>
</div>
<div class="col-xs-12 text-right" style="border-top: 1px solid #eee;padding: 10px 15px;">
<button class="btn btn-warning" @click="doSave(p1, index)">保存</button>
</div>
</div>
</div>
* carList: [{}, {}]
* data-vv-scope: [type='string'] 屬性的值的類型是 string,表示定義了一個(gè)區(qū)域,在校驗(yàn)的時(shí)候,通過(guò)屬性值 讓validator 可以找到當(dāng)前應(yīng)該校驗(yàn)的區(qū)域。
此時(shí)通過(guò) 驗(yàn)證器提供的方法validate(scopeName)就可以校驗(yàn)當(dāng)前區(qū)域了。
doSave (obj, i) {
var _self = this
var validateScope = 'newsletter' + i
this.$validator.validate(validateScope + '.*').then((result) => {
if (result) {
// 提交數(shù)據(jù)
_self.doSaveAfterCheck()
}
})
}
/*
errors.has(field, scope) 返回一個(gè)true / false
errors.has('actualWgh' + index, 'newsletter' + index)}" 表示驗(yàn)證區(qū)域是 data-vv-scope = 'newsletter' + index 驗(yàn)證的字段是屬性 name ='actualWgh' + index
first(field,scope) 返回與特定字段關(guān)聯(lián)或由選擇器指定的第一條錯(cuò)誤消息,前提是作用域?qū)⒉檎以摲秶鷥?nèi)的消息,
*/
<div class="form-group" :class="{'has-error': errors.has('actualWgh' + index, 'newsletter' + index)}">
<label>總重(kg) <i class="errMsg">*</i></label>
<input type="text" class="form-control" v-model.trim="p1.actualWgh" :data-vv-scope="'newsletter' + index"
v-validate="{required: true, decimal:2, min_value: 0, max_value: p1.planWgh}"
:name="'actualWgh' + index" :data-vv-as="$t('message.weight')">
<span v-show="errors.has('actualWgh' + index, 'newsletter' + index)" class="help-block">{{ errors.first('actualWgh' + index, 'newsletter' + index) }}</span>
</div>
場(chǎng)景2 : 頁(yè)面有多個(gè)校驗(yàn)。當(dāng)保存的時(shí)候,需要全部校驗(yàn)。這個(gè)場(chǎng)景官方提供2種方法.
this.$validator.validate().then((result) => {
if (result) {
// 提交數(shù)據(jù)。
// result是一個(gè)boolean值。true 表示沒有觸發(fā)錯(cuò)誤規(guī)則,false 表示頁(yè)面有非法值,觸發(fā)錯(cuò)誤
_self.doSaveAfterCheck()
}
})
this.$validator.validateAll().then((result) => {
if (result) {
// 提交數(shù)據(jù)。
_self.doSaveAfterCheck()
}
})
上述兩種校驗(yàn)全部的方法不同點(diǎn)在于適用場(chǎng)景:

validate() 可以指定校驗(yàn)范圍內(nèi),或者是全局的 字段。而validateAll() 只能校驗(yàn)全局。
官方示例:
// validate all fields.
// 校驗(yàn)全局范圍所有字段
validator.validate(); === validateAll() 兩個(gè)方法完全一樣。
// validate a field that has a matching name with the provided selector.
// 校驗(yàn)?zāi)膫€(gè)字段? field 取name的值。
validator.validate('field');
// validate a field within a scope.
// 校驗(yàn) 某個(gè)域內(nèi) 的某個(gè)字段。
validator.validate('scope.field');
// validate all fields within this scope.
// 校驗(yàn) 某個(gè)域內(nèi)的所有字段。 上述例子就是用的這個(gè)。 *_*
validator.validate('scope.*');
// validate all fields without a scope.
// 校驗(yàn)沒有定義域內(nèi)的 字段。適用場(chǎng)景: 校驗(yàn)場(chǎng)景分為兩種: 定義域的,沒有定義域。
// 當(dāng)頁(yè)面所有需要校驗(yàn)的字段,都定義了域,則這個(gè)方法會(huì)導(dǎo)致沒有可校驗(yàn)的值,直接返回true
validator.validate('*');
總結(jié)
以上所述是小編給大家介紹的vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解(部分校驗(yàn),全部校驗(yàn)),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾
這篇文章主要介紹了多個(gè)vue項(xiàng)目實(shí)現(xiàn)共用一個(gè)node-modules文件夾,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
vue3使用quill富文本編輯器保姆級(jí)教程(附踩坑解決)
這篇文章主要給大家介紹了關(guān)于vue3使用quill富文本編輯器保姆級(jí)教程的相關(guān)資料,在許多網(wǎng)站和應(yīng)用程序中富文本編輯器是一種常見的工具,它使用戶能夠以直觀的方式創(chuàng)建和編輯文本內(nèi)容,需要的朋友可以參考下2023-11-11
詳解Vue改變數(shù)組中對(duì)象的屬性不重新渲染View的解決方案
這篇文章主要介紹了詳解Vue改變數(shù)組中對(duì)象的屬性不重新渲染View的解決方案,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue3組件庫(kù)框架搭建example環(huán)境的詳細(xì)教程
這篇文章主要介紹了Vue3組件庫(kù)框架搭建example環(huán)境的詳細(xì)教程,本文便搭建?example?開發(fā)環(huán)境和打包構(gòu)建,并在example中使用組件庫(kù),需要的朋友可以參考下2022-11-11
Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例
今天小編就為大家分享一篇Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
基于vue+canvas的excel-like組件實(shí)例詳解
a vue component,基于vue的表格組件,主要解決大數(shù)據(jù)量的表格渲染性能問(wèn)題,使用canvas繪制表格,同時(shí)支持類似excel的批量選中,復(fù)制黏貼刪除,實(shí)時(shí)編輯等功能.這篇文章主要介紹了基于vue+canvas的excel-like組件,需要的朋友可以參考下2017-11-11
elementui中樹形表格切換展開不同層級(jí)的示例代碼
這篇文章主要介紹了elementui中樹形表格切換展開不同層級(jí),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08

