【前端】ElementPlus表单数组形式数据自定义校验(必填)

情景

如果是一组动态数组式的数据，需要对每组的每个数据都进行自定义校验，必填星号怎么在每个label上展示。

核心代码

1.自定义rules：

ts 复制代码

const rules = {
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  name: [{ required: true, message: '请选择名称', trigger: 'change' }],
  rato: [
    { required: true, message: '请输入比例', trigger: 'blur' },
    {
      pattern: /^(100|[1-9]?\d)(\.\d+)?$/,
      message: '请输入有效的百分比（0-100）',
      trigger: 'blur',
    },
  ],
  rate: [
    { required: true, message: '请输入费率', trigger: 'blur' },
    { pattern: /^(100|[1-9]?\d)(\.\d+)?$/, message: '请输入有效的费率（0-100）', trigger: 'blur' },
  ]
};

2.form表单中使用

重点在于在每一个表单项中使用：**:prop="`${index}.type`"**和 :rules="rules.type"

html 复制代码

<el-form-item label="类型：" :prop="`${index}.type`":rules="rules.type" >

还有用v-for 展示动态的每一组

html 复制代码

<el-form ref="actionFormRef" :model="actionForm" label-width="122px">
      <div v-for="(item, index) in actionForm" :key="index" class="org-container">
        <div class="org-header">
          <div class="org-title">内容{{ index + 1 }}</div>
          <div class="org-action">
            <el-button v-if="index > 0" type="danger" size="small" @click="handleRemoveOrg(index)"
              >删除</el-button
            >
            <el-button type="primary" size="small" @click="handleAddOrg(index)">添加一组</el-button>
          </div>
        </div>
        <el-row :gutter="8">
          <el-col :span="12">
            <el-form-item
              label="类型："
              :prop="`${index}.type`"
              :rules="rules.type"
            >
              <el-select v-model="item.type" clearable>
                <el-option
                  v-for="item in options1"
                  :key="item.dictValue"
                  :value="item.dictValue"
                  :label="item.dictLabel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="名称："
              :prop="`${index}.name`"
              :rules="rules.name"
            >
              <el-select
                v-model="item.name"
                filterable
                clearable
                remote
                placeholder="请输入搜索"
                :remote-method="searchName"
                style="width: 240px"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="比例："
              :prop="`${index}.rato`"
              :rules="rules.rato"
            >
              <el-input v-model="item.rato" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="费率："
              :prop="`${index}.rate`"
              :rules="rules.rate"
            >
              <el-input v-model="item.rate" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
         </el-row>
      </div>
    </el-form>

这样会对每一项进行必填校验，label上还有标识。

自定义校验

自定义校验需要自定义校验函数。

首先在需要在rules中声明：

ts 复制代码

const rules={
  rate: [
    { validator: validateRates, trigger: 'blur' },
    { required: true, message: '请输入', trigger: 'blur' },
  ],
 }

其次进行函数定义，格式为

ts 复制代码

const validateRates = (rule: any, value: any, callback: any) => {
  // 获取当前正在验证的索引
  const match = rule.field.match(/\[(\d+)\]/);
  const formIndex = match ? parseInt(match[1], 10) : 0;
  const currentForm = actionForm.value[formIndex];
  
  //xxxx自定义校验逻辑，失败则
  if(false)
  callback('此项校验失败');
  
  //校验成功则回返
  callback();
};