当是多条件且重复的表单选项如何实现校验

如果html的结构如下rule.strategy里面有name,negate,value三个条件

<el-form-item prop=“rule.strategy">

              <div

                v-for="(item, index) in formData.rule.strategy"

                :key="index + '-only'"

                style="padding-left: index * 3.125rem"

              >

                <div style="display: flex; justify-content: space-between">

                  <div style="display: flex">

                                       <el-select

                      class="nameInput"

                      v-model="item.name"

                      ref="valSelect"

                      filterable

                      clearable

                      allow-create

                      @change="handleGetOptionChange"

                      placeholder="请选择或添加"

                    >

                      <el-option

                        v-for="(item, index) in fieldsOptions"

                        :key="index"

                        :label="item.name"

                        :value="item.id"

                        :disabled="item.disabled"

                      >

                      </el-option>

                    </el-select>

                    <el-select

                      v-model="item.negate"

                      ref="valSelect"

                      clearable

                      filterable

                      placeholder="请选择"

                      class="relationOfNameAndValueInput interval"

                    >

                      <el-option

                        v-for="(item, index) in innerOptions"

                        :key="index"

                        :label="item.label"

                        :value="item.value"

                      >

                      </el-option>

                    </el-select>

                    <el-input

                      class="interval"

                      v-model="item.value"

                      clearable

                      placeholder="请输入"

                    ></el-input>

                  </div>

                </div>

              </div>

            </el-form-item>

定义formRule如下"rule.strategy"

private formRule = {

         "rule.strategy": [

      {

        type: "array",

        required: true,

        message: "请完整填写规则配置",

        trigger: ["blur", "change"],

      },

      {

        validator: this.validateStrategy,

        trigger: ["blur", "change"],

      },

    ],

  };

定义validateStrategy方法为校验方法

function validateWaZuhStrategy(rule, val, callback) {

        const isValid = val.every((item) => {

          return item.name && [true, false].includes(item.negate) && item.value;

        });

        if (isValid) {

         callback(); // 校验通过

        } else {

          callback(new Error('请完整填写规则配置')); // 校验不通过,返回错误信息

        }

      }Ï

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值