当需验证的内容为数组时,该如何进行验证呢
需求除了要校验数组之外,会发现一条中需要验证两条,并且数组的个数是不确定的,具体要如何实现呢,下面具体说一下
<div v-for="(item,index) in ruleForm.companyVendorBalancePayment" style="overflow:hidden;padding-bottom:10px;" :key="index" :class="ruleForm.paymentDay=='ADVNCE'?'block2':'none'">
<el-form-item label="尾款账期" style="float:left;" :prop="'companyVendorBalancePayment.'+index+'.paymentDays'" :rules="{ required: true, message: '请选择尾款账期', trigger: 'blur' }">
<div>
<el-select v-model="item.paymentDays" placeholder="请选择账期" @change="changeDays">
<el-option v-for="item in payment2" :key="item.lable" :label="item.lable" :value="item.code"></el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label-width="5px" :prop="'companyVendorBalancePayment.'+index+'.paymentDaysPercent'" style="float:left;" :rules="{ required:true,pattern: /^(?:0|[1-9][0-9]?|100)$/, message: '请输入0-100的数字', trigger: 'blur' }">
<span style="color:red;">*</span>
<el-input type="number" v-model="item.paymentDaysPercent" :max="maxNum" :disabled="item.isPercent" style="width:100px;"></el-input>
<span>%</span>
<span style="margin-left:10px;" v-if="!item.isPercent">
<img src="../../assets/img/icon/add.png" @click="toAdd(item,'ruleForm')" style="vertical-align:middle;"/>
<img v-if="index !=0" src="../../assets/img/icon/del.png" @click="toDel(item)" style="vertical-align:middle;"/>
</span>
</el-form-item>
</div>
其中ruleForm.companyVendorBalancePayment为要验证的数组,v-for循环了之后,:prop="'companyVendorBalancePayment.'+index+'.paymentDays'",这是对prop进行了处理companyVendorBalancePayment代表了数组,index代表的是数组的index索引,paymentDays代表尾款账期的参数名
注:不要忘记""."
至此就可以实现简单的form数组校验