Element动态表单中数组循环验证必填方法

• 实用干货

  对于前端某个业务实体，可能需要在form表单内，动态生成一个数组类型的一组数据，要求对生成的每一组数据内容进行表单验证。例如动态添加人员，并对每个信息输入框进行表单验证。

• 干货详细

  此次项目是使用vue3和elment-plus来实现动态表单验证

• 

使用表单组件

<el-button size="small" class="adduse" type="primary" @click="handleAddUse">  添加处理人</el-button><el-form :model="state" ref="processorRef" size="default" label-width="80px"  class="pt15 pr15 pb15 pl15" :rules="processRules">  <div v-for="(item, index) in state.processor" style="margin-bottom: 40px">    <el-form-item label="办理人员" :prop="'processor.' + index + '.rule'"      :rules="processRules.rule">      <el-select v-model="item.rule" clearable placeholder="请选择">        <el-option v-for="item in data.ruleOptions" :key="item.label" :label="item.value"          :value="item.label" />      </el-select>    </el-form-item>    <el-form-item label="指定角色" :prop="'processor.' + index + '.rule_value'"      :rules="processRules.rule_value">      <el-cascader v-model="item.rule_value" :show-all-levels="false" :props="ruleProps"        :options="data.roleOptions" />    </el-form-item>    <el-form-item label="进入路径">      <el-select v-model="item.entry_path" clearable placeholder="请选择">        <el-option v-for="item in data.lineList" :key="item.id" :label="item.name"          :value="item.id" />      </el-select>      <el-button type="primary" link @click="deleteProcess(index)">        <el-icon>          <Delete />        </el-icon>      </el-button>    </el-form-item>  </div></el-form><el-form-item>  <el-button class="mb15" @click="onProcessedRefresh">    <SvgIcon name="ele-RefreshRight" />    重置  </el-button>  <el-button type="primary" class="mb15" @click="onProcessedSubmit()">    <SvgIcon name="ele-Check" />    保存  </el-button></el-form-item>

组件中绑定的数据，包括动态新增表单，删除表单，验证

<script setup lang='ts'>import { ref, reactive } from 'vue';// 验证规则const processRules = reactive({  rule: [{ required: true, message: "请选择", trigger: "blur" }],  rule_value: [{ required: true, message: "请选择", trigger: "blur" }],});// 添加处理人const handleAddUse = () => {  state.processor.push({    rule: '',    rule_value: [],    entry_path: ''  })}// 删除处理人const deleteProcess = (index: any) => {  state.processor.splice(index, 1)}// 处理人配置-保存验证const onProcessedSubmit = () => {  processorRef.value.validate((valid: boolean) => {    if (valid) {    } else {      return false;    }  });}</script>

这样我们就可以实现在动态表单验证必填了。

• 结论

发布文章的初衷：

• 打造一个专注于前端功能问题的问答平台，让大家高效搜索处理同样问题。

• 遇到有共鸣的问题，与众多同行朋友们一起讨论，一起沉淀成长。

感谢大家关注从此让解决问题的你不再孤单！

​