vue+VeeValidate 校验范围实例详解(部分校验,全部校验)

2020-06-12 21:17:38易采站长站整理

搜索很久,没有发现有关于vue+VeeValidate部分校验的。自己写一个。

主要是两个场景:

1. 校验范围内,所有的字段。

2. 校验全局所有字段。

主要方法:

1.validate(fields, scope)     

2. validateAll(fields)

场景: 遍历得到多个列表,每一个列表都可以独立保存当前列表。在保存当前列表的时候,需要校验当前列表输入框的合法性。

代码:


<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;">车牌号: <span style="font-weight: normal;word-break:break-all;">{{p1.planLicenseNo}}</span></label>
<label class="col-xs-12" style="padding: 5px 0;;">司机:<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 >实际车牌号 <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 >实际数量(头)<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}"