背景:在新建报表的时候涉及表单校验,其中分析模块是动态添加的,要求分析名称不可重复,所以需要循环校验这个部分。
页面样式:
html代码:
<div class="config-box" v-for="(configItem,index) in createform.analysisList" :key="index">
<el-form-item label="分析名称" :prop="`analysisList.${index}.analysisName`" :rules="rules.analysisName">
<el-input v-model.trim="configItem.analysisName"
placeholder="请输入分析模块名称"
style="width:490px;"></el-input>
</el-form-item>
<el-form-item label="分析维度" :prop="`analysisList.${index}.analysisType`">
<el-select v-model="configItem.analysisType" style="width: 490px">
<el-option v-for="item in analyseOption"
:key="item.value"
:value="item.value"
:label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="商品分类" :prop="`analysisList.${index}.dataRangeList`">
<el-cascader v-model="configItem.dataRangeList"
:options="categoryOptions"
:props="categoryProps"
:show-all-levels="false"
:collapse-tags="configItem.collapseFlag"
clearable
:key="index+configItem.collapseFlag"
@visible-change="(val,item) => handleVisibleChange(val,configItem)"
placeholder="请选择分类,不选表示全部"
style="width: 490px"></el-cascader>
</el-form-item>
<el-form-item label="时间维度" :prop="`analysisList.${index}.timeType`">
<el-radio-group v-model="configItem.timeType">
<el-radio :label="1">分日</el-radio>
<el-radio :label="2">汇总</el-radio>
</el-radio-group>
</el-form-item>
<el-button icon="el-icon-minus" class="del-btn" @click="deleteConfig(index)"></el-button>
</div>
<el-button @click="addConfig" class="add-btn">+ 继续添加分析模块</el-button>
方法1:利用rule(通过去重后判断长度是否相等,反推是否有重复值)
rules: {
analysisName: [
{ required: true, message: '请输入分析模块名称', trigger: 'blur' },
{ required: true, validator: this.validatorName, trigger: 'blur' },
],
}
//自定义校验方法
validatorName(rule, value, callback) {
let array = this.createform.analysisList.map(item => item.analysisName)
let arr = Array.from(new Set(array)) //去重
if(array.length !== arr.length) { //如果原始数组长度和去重后的数组长度不相等,说明有重复值
callback(new Error('分析名称不能重复'));
}
callback()
},
第二种写法:把方法validatorName定义为一个常量
方法2:利用回调函数(把当前item的值,与过滤掉当前item的原数组比较)
rules规则直接在html里面配置,validatorName方法的实参是(rule, value, callback),形参是(rule, value, callback, index),index是真实的索引值
<el-form-item label="分析名称" :prop="`analysisList.${index}.analysisName`"
:rules="[
{ required: true, message: '请输入分析模块名称', trigger: 'blur' },
{ required: true, validator: (rule, value, callback) => validatorName(rule, value, callback, index), trigger: 'blur' },
]">
<el-input v-model.trim="configItem.analysisName"
placeholder="请输入分析模块名称"
style="width:490px;"></el-input>
</el-form-item>
注:第二种方法受到启发el-form:自定义校验规则如何传递参数_el-form validator传参_Jay丶萧邦的博客-CSDN博客