Elementui form校验数组

5,384 阅读1分钟

Elementui form表单中有个简单的表单验证,具体可参考element.eleme.cn/#/zh-CN/com…

当需验证的内容为数组时,该如何进行验证呢

需求除了要校验数组之外,会发现一条中需要验证两条,并且数组的个数是不确定的,具体要如何实现呢,下面具体说一下

<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数组校验