[element-ui]el-form自定义校验规则传参，解决循环校验问题

原创已于 2023-09-22 17:27:07 修改 · 2.2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

element-ui

于 2023-03-13 18:46:20 首次发布

文章介绍了在Vue.js应用中，使用el-form组件进行表单校验时，如何处理动态添加的分析模块名称不可重复的需求。提出了两种方法：一是通过自定义校验方法比对去重后的数组长度；二是利用回调函数结合索引值进行校验。

背景：在新建报表的时候涉及表单校验，其中分析模块是动态添加的，要求分析名称不可重复，所以需要循环校验这个部分。

页面样式：

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博客

标签

#elementui