element-ui form表单，内嵌表单数据校验

最新推荐文章于 2024-08-21 14:51:53 发布
最新推荐文章于 2024-08-21 14:51:53 发布
阅读量493 收藏
点赞数
分类专栏： element 文章标签： vue.js javascript elementui form
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yufengaotian/article/details/133300784
版权

在最近开发的功能的过程中，遇到一个很复杂的表单；外层一个大表单；里面有一项是动态添加的，而且内嵌一个表单。每一项还有校验规则；如下图

记录一下调试结果。 无论多少层form, 注意几个事项；

form的model/ref;  form_item的prop这个关系到，校验作用具体那个框框 

数据还一个json，组件只是渲染UI，逐步分解就好了。

直接上完整代码，如下：

<!--定义巡检项-->
<template>
  <div class="drawer__content">
    <el-form :model="formUp" ref="formUp">
      <el-form-item
        label="巡检项名称"
        prop="name"
        :label-width="formLabelWidth"
        :rules="[
          { required: true, message: '请输入巡检项名称', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formUp.name"
          autocomplete="off"
          maxlength="64"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="巡检项描述"
        prop="description"
        :label-width="formLabelWidth"
        :rules="[
          { required: false, message: '请输入巡检项描述', trigger: 'blur' },
        ]"
      >
        <el-input
          v-model="formUp.description"
          type="textarea"
          autocomplete="off"
          maxlength="200"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item
        label="巡检项登录用户"
        prop="itemLevels"
        :label-width="formLabelWidth"
        :rules="[
          {
            required: true,
            message: '请选择巡检项登录用户',
            trigger: 'change',
          },
        ]"
      >
        <el-checkbox-group v-model="formUp.itemLevels">
          <el-checkbox
            label="root"
            name="type"
            :disabled="formUp.itemLevels.includes('oracle')"
          ></el-checkbox>
          <el-checkbox
            label="administrator"
            name="type"
            class="borderRight"
            :disabled="formUp.itemLevels.includes('oracle')"
          ></el-checkbox>
          <el-checkbox
            label="oracle"
            name="type"
            :disabled="
              formUp.itemLevels.includes('root') ||
              formUp.itemLevels.includes('administrator')
            "
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item
        label="巡检项分类"
        prop="itemCategoryId"
        :label-width="formLabelWidth"
        :rules="[
          { required: false, message: '请选择巡检项分类', trigger: 'change' },
        ]"
      >
        <el-cascader
          v-model="formUp.itemCategoryId"
          clearable
          :filterable="true"
          :props="{
            value: 'id',
            label: 'name',
            children: 'children',
            emitPath: 'false',
            checkStrictly: true,
          }"
          :options="folderData"
          :show-all-levels="false"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.name }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <el-form-item
        label="资源分类"
        prop="resourceCateId"
        :label-width="formLabelWidth"
        :rules="[
          { required: true, message: '请选择资源分类', trigger: 'change' },
        ]"
      >
        <el-select
          v-model="formUp.resourceCateId"
          placeholder="请选择资源分类"
          @change="getTemplateArr"
          :disabled="setDialogType == 'edit'"
        >
          <el-option
            v-for="resourceItem in resourceArr"
            :key="resourceItem.id"
            :label="resourceItem.name"
            :value="resourceItem.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="结果判定"
        prop="resultCheck"
        :label-width="formLabelWidth"
      >
        <el-switch
          v-model="formUp.resultCheck"
          active-text="有"
          inactive-text="无"
        >
        </el-switch>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <div slot="label">
          <span
            ><i style="color: #f56c6c; margin-right: 4px">*</i
            >能力模板及表达式配置</span
          >
        </div>
        <div class="addForm">
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="addTemplate(formUp.templateConfigList)"
            >增加能力模板</el-button
          >
        </div>
        <div class="formContent">
          <div
            class="formItem"
            v-for="(itemForm, indexA) in formUp.templateConfigList"
            :key="indexA"
          >
            <h4>
              能力模板{{ indexA + 1 }}
              <i
                style="margin-left: 10px; font-size: 16px; cursor: pointer"
                class="el-icon-delete-solid"
                v-if="indexA > 0"
                @click="deleteTemplate(indexA)"
              ></i>
            </h4>
            <el-form :model="itemForm" :ref="'formDown' + indexA">
              <!-- 选择能力模板 -->
              <el-form-item
                label="选择能力模板"
                prop="abilityTemplateId"
                :label-width="formLabelWidthB"
                :rules="[
                  {
                    required: true,
                    message: '请选择能力模板',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="itemForm.abilityTemplateId"
                  placeholder="请选择能力模板"
                  @change="
                    changeItemTemplate(itemForm.abilityTemplateId, itemForm)
                  "
                >
                  <el-option
                    v-for="(a, index1) in powerArr"
                    :key="index1"
                    :label="a.name"
                    :value="a.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 数据库部署模式 -->
              <!-- <el-form-item
                v-if="formUp.resultCheck"
                label="数据库部署模式"
                prop="dbDeployType"
                :label-width="formLabelWidthB"
                :rules="[
                  {
                    required: false,
                    message: '请选择数据库部署模式',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="itemForm.dbDeployType"
                  placeholder="请选择数据库部署模式"
                >
                  <el-option
                    v-for="(b, index2) in schemaArr"
                    :key="index2"
                    :label="b.name"
                    :value="b.id"
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <!-- 表达式配置 -->
              <el-form-item
                v-if="formUp.resultCheck"
                :label-width="formLabelWidthB"
              >
                <div slot="label">
                  <span
                    ><i style="color: #f56c6c; margin-right: 4px">*</i
                    >表达式配置</span
                  >
                  <el-tooltip class="item" effect="dark" placement="top-start">
                    <div slot="content">
                      <p>1. 符合下述表达式时则判定巡检结果正常；</p>
                      <p>2. 多个表达式时默认按”逻辑与“的关系处理；</p>
                    </div>
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </div>
                <div class="addExpression">
                  <el-button
                    type="primary"
                    icon="el-icon-circle-plus"
                    @click="itemFormAddRules(itemForm)"
                    >添加表达式</el-button
                  >
                </div>
                <div
                  class="flexBox"
                  v-for="(m, indexM) in itemForm.resultCheckRule.rules"
                  :key="indexM"
                >
                  <div class="expressionItem">
                    <el-form-item
                      :prop="`resultCheckRule.rules.` + indexM + '.ruleParam'"
                      :rules="[
                        {
                          validator: (rule, value, callback) =>
                            checkRuleParam(
                              rule,
                              value,
                              callback,
                              itemForm.resultCheckRule.rules
                            ),
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="m.ruleParam"
                        placeholder="巡检项参数"
                        clearable
                      >
                        <el-option
                          v-for="(c, index3) in itemForm.ruleParamArr"
                          :key="index3"
                          :label="`${c.value}(${c.label})`"
                          :value-key="c.label"
                          :value="c"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="expressionItem">
                    <el-form-item
                      :prop="
                        `resultCheckRule.rules.` + indexM + '.ruleOperator'
                      "
                      :rules="[
                        {
                          required: true,
                          message: '请选择数据库部署模式',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="m.ruleOperator"
                        placeholder="表达式符号"
                        clearable
                      >
                        <el-option
                          v-for="(d, index4) in itemForm.ruleOperator"
                          :key="index4"
                          :label="d.label"
                          :value-key="d.label"
                          :value="d"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="expressionItem">
                    <el-form-item
                      :prop="`resultCheckRule.rules.` + indexM + '.ruleValue'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择表达式符号',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-input
                        v-model="m.ruleValue"
                        placeholder="请输入参数值"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="delBtn">
                    <i
                      v-if="indexM > 0"
                      class="el-icon-delete-solid"
                      @click="itemFormDeleteRules(itemForm, indexM)"
                    ></i>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="drawer__footer">
      <el-button @click="cancelForm">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm(setDialogType)"
        :loading="loading"
        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
      >
    </div>
  </div>
</template>
<script>
import * as requestMethod from "@/api/inspection/inspectionType/index.js";
export default {
  props: {
    folderData: {
      type: Array,
      default: () => [],
    },
    setDialogType: {
      type: String,
      default: () => "",
    },
    setDialogData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    let checkExpression = (rule, value, callback, indexA) => {
      console.log("修改的能力模板内容", value);
      if (value == "") {
        callback("修改的能力模板内容");
      } else {
        callback();
      }
    };
    let checkRuleParam = (rule, value, callback, rulesArr) => {
      console.log("修改的能力模板内容", value);
      console.log("rulesArr", rulesArr);
      // 校验是否有重复的
      let hasRuleParamlength = rulesArr.filter(
        (a) => a.ruleParam.label == value.label
      ).length;
      if (value == "") {
        callback("请选择脚本参数");
      } else if (hasRuleParamlength > 1) {
        callback("脚本参数不能重复");
      } else {
        callback();
      }
    };
    return {
      checkExpression,
      checkRuleParam, // 校验表达式参数
      loading: false,
      // 上班部门表单
      formUp: {
        name: "", // 名称
        description: "", // 描述
        itemCategoryId: "", // 巡检项分类
        resourceCateId: "", // 资源分类
        itemLevels: [], // 用户
        resultCheck: true, // 结果判定,默认flase
        templateConfigList: [
          {
            abilityTemplateId: "", // 选择能力模板
            // 数据库部署模式,参数去掉了
            // dbDeployType: "",
            resultCheckRule: {
              // 表达式配置
              rules: [
                {
                  ruleParam: {
                    label: "", //
                    value: "", //
                  }, // 巡检项参数
                  ruleOperator: {
                    label: "",
                    value: "",
                  }, // 表达式符合
                  ruleValue: "", // 参数值
                },
              ], // 表达式配置
            },
            ruleParamArr: [], // 巡检项参数，由选择的能力模板决定
            ruleOperator: [], // 巡检参数表达式数据源
          },
        ],
      },
      formLabelWidth: "170px",
      formLabelWidthB: "128px", // 循环表单项宽度
      timer: null,
      // 数据源部分
      resourceArr: [], // 资源分类数据源
      powerArr: [], // 能力模板数据源
      schemaArr: [], // 数据库部署模式数据源
      // parameterArr: [], // 巡检项参数，数据源
      // 巡检项分类展示取参
      showProps: {
        value: "id",
        label: "name",
      },
    };
  },
  created() {
    // 此处接口获取数据源,下面模拟数据
    this.getResourceArr();
  },
  mounted() {
    console.log("row", this.setDialogData);
    if (this.setDialogType == "edit") {
      let {
        name,
        description,
        itemCategoryId,
        resourceCateId,
        itemLevels,
        resultCheck,
        templateConfigList,
      } = this.setDialogData;
      this.formUp.name = name; // 名称
      this.formUp.description = description; // 描述
      this.formUp.itemCategoryId = [itemCategoryId]; // 巡检项分类
      this.formUp.resourceCateId = resourceCateId; // 资源分类
      this.formUp.itemLevels = itemLevels; // 用户
      this.formUp.resultCheck = resultCheck; // 结果判定,默认flase
      this.formUp.templateConfigList = templateConfigList.map((a) => {
        let objTemplateConfig = {
          abilityTemplateId: a.abilityTemplateId,
          abilityTemplateName: a.abilityTemplateName,
          resultCheckRule: a.resultCheckRule,
          ruleParamArr: [], // 巡检项参数，由选择的能力模板决定
          ruleOperator: [], // 巡检参数表达式数据源
        };
        return objTemplateConfig;
      });
      // 根据资源分类，查询模板参数数据源，处理配置templateConfigList每项的ruleParamArr/ruleOperator
      this.editFormUpTemplateList(resourceCateId); //
    }
    // 部署模式固定数据
    // this.schemaArr = [
    //   { id: "RAC", name: "RAC" },
    //   { id: "Single", name: "单节点" },
    //   { id: "PowerHA", name: "powerHA" },
    // ];
  },
  methods: {
    // 获取资源分类
    getResourceArr() {
      requestMethod.getResoureConfig("get").then((res) => {
        if (res.status || res.code == 200) {
          this.resourceArr = res.data;
        }
      });
    },
    // 资源分类修改，获取对应的能力模板数据
    getTemplateArr(e) {
      console.log("选择的资源分类", e);
      let parmas = {
        resourceCateId: e,
      };
      requestMethod.getTemplateConfig("get", parmas).then((res) => {
        if (res.status || res.code == 200) {
          this.powerArr = res.data;
        }
      });
    },
    editFormUpTemplateList(id) {
      let parmas = {
        resourceCateId: id,
      };
      requestMethod.getTemplateConfig("get", parmas).then((res) => {
        let that = this;
        if (res.status || res.code == 200) {
          this.powerArr = res.data;
          let zzPowerArr = res.data;
          // 处理现有的数据
          this.formUp.templateConfigList = this.formUp.templateConfigList.map(
            (m) => {
              zzPowerArr.map((n) => {
                if (n.id == m.abilityTemplateId) {
                  m.ruleParamArr = that.objToArray(n.downParaStruct); // 巡检项参数，由选择的能力模板决定
                  m.ruleOperator = n.ruleOperators; // 巡检参数表达式数据源
                }
                return true;
              });
              return m;
            }
          );
        }
      });
    },
    // 当前能力模板的，模板修改，查询对应的表达式参数以及数据源
    changeItemTemplate(abilityTemplateId, itemForm) {
      console.log("templateId", abilityTemplateId);
      console.log("itemForm", itemForm);
      requestMethod.getTemplateKeys("get", abilityTemplateId).then((res) => {
        if (res.status || res.code == 200) {
          itemForm.ruleParamArr = this.objToArray(res.data.downParaStruct); // 当前模板的巡检参数数据源
          itemForm.ruleOperator = res.data.ruleOperators; // 当前模板表达式数据源
        }
      });
    },
    // 把对象属性参数，转成数组对象
    objToArray(obj) {
      return Object.entries(obj).map(([name, value]) => ({
        label: value.note,
        value: name,
        type: value.valueType,
        // required: value.required,
      }));
    },
    //  能力模板新增表达式
    itemFormAddRules(itemForm) {
      let obj = {
        ruleParam: {
          label: "", //
          value: "", //
        }, // 巡检项参数
        ruleOperator: {
          label: "",
          value: "",
        }, // 表达式符合
        ruleValue: "", // 参数值
      };
      itemForm.resultCheckRule.rules = [...itemForm.resultCheckRule.rules, obj];
    },
    // 能力模板表单删除表达式
    itemFormDeleteRules(itemForm, indexM) {
      itemForm.resultCheckRule.rules.splice(indexM, 1);
    },
    // 新增大块的能力模板
    addTemplate(templateConfigList) {
      let templateObject = {
        abilityTemplateId: "", // 选择能力模板
        // dbDeployType: "", // 数据库部署模式
        resultCheckRule: {
          // 表达式配置
          rules: [
            {
              ruleParam: {
                label: "", //
                value: "", //
              }, // 巡检项参数
              ruleOperator: {
                label: "",
                value: "",
              }, // 表达式符合
              ruleValue: "", // 参数值
            },
          ], // 表达式配置
        },
        ruleParamArr: [], // 巡检项参数，由选择的能力模板决定
        ruleOperator: [], // 巡检参数表达式数据源
      };
      this.formUp.templateConfigList = [...templateConfigList, templateObject];
    },
    // 删除大块的能力模板
    deleteTemplate(indexA) {
      this.formUp.templateConfigList.splice(indexA, 1);
    },
    // 取消
    cancelForm() {
      this.loading = false;
      this.$emit("closeSetDialog");
    },
    // 确定
    submitForm(type) {
      this.$refs["formUp"].validate((valid) => {
        if (valid) {
          // 把itemCategoryId重数组转成字符串
          this.formUp.itemCategoryId = this.formUp.itemCategoryId.join();
          let vo = this.formUp;
          let xjxId = type == "edit" ? this.setDialogData.id : ""; // 巡检项Id
          if (type == "add") {
            requestMethod.setInspection("post", vo).then((res) => {
              if (res.status) {
                this.$message.success("定义巡检项成功");
                // 按照左侧数据筛选，重新获取列表数据
                this.$emit("closeSetDialog", "getList");
              }
            });
          } else if (type == "edit") {
            requestMethod.editInspection("put", vo, xjxId).then((res) => {
              if (res.status) {
                this.$message.success("配置巡检项成功");
                // 按照左侧数据筛选，重新获取列表数据
                this.$emit("closeSetDialog", "getList");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang='less' scoped>
.drawer__content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  form {
    flex: 1;
  }
  .borderRight {
    border-right: 1px solid #d9dde0;
    padding-right: 30px;
  }
}
.drawer__footer {
  text-align: right;
  border-top: 1px solid #e7edf3;
  padding-top: 10px;
}
// 能力模板样式处理
.formContent {
  margin-top: 10px;
  .formItem {
    border: 1px solid #e7edf3;
    padding: 0 10px;
    h4 {
      border-bottom: 1px solid #e7edf3;
      margin-bottom: 15px;
    }
    .addExpression {
      margin-bottom: 15px;
    }
    .flexBox {
      display: flex;
      align-items: flex-start;
      .expressionItem {
        flex: 1;
        margin-right: 10px;
      }
      .delBtn {
        width: 30px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>

elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
weixin_33240229的博客
01-26 448
一：表单一级验证element中from组件内表单验证通过使用el-form标签，绑定model和rules属性进行表单验证简单的表单验证很简单，在prop内绑定验证属性，然后在rules对象内定义验证方法rules: {belongId: [{required: true,message: '不能为空',trigger: 'change'}]}二：模板一次循环渲染时表单验证v-model="it...
element-ui的form表单校验踩坑
weixin_47783830的博客
08-21 1237
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。 管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码： 这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la
【Element】el-form和el-table嵌套实现表格编辑并提交表单校验
weixin_71403100的博客
01-05 7465
页面需要用到表格采集用户数据，提交时进行表单校验；即表格中嵌套着表单，保存时进行表单校验。
vue element ui form表单，一列中两个参数并且都要验证，动态添加表单，动态验证
qq_16463875的博客
08-21 297
但是很明显这个问题是一个验证规则有两个参数。根据element 组件验证规则是 v-model prop rules 要一致。所以就会有一个致命问题 那就是智能验证一个。在自定义验证的时候需要加上 表单动态添加的验证规则，很多人就要问了 index ,_this 是怎么来的 这里是形参 需要在验证添加、动态增加表单可以根据表单动态添加。这个在element ui form表单有例子，这里就不做赘叙。我在第一个验证里面添加上第二个验证。我感觉说的有点乱 不要着急 前面是思路 后面这里我贴上完整代码。
elementUI动态嵌套el-form表单校验
小绵杨
03-19 7524
前端项目开发过程中表单校验是非常常见的需求，elementUI的el-form组件也是支持配置rules属性来配置表单项的校验。 Form 组件允许你验证用户的输入是否符合规范，来帮助你找到和纠正错误。 Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可。
elementUI form表单的嵌套校验
shuishui_97的博客
07-02 772
" :params="{fileType:'9',nodeCode:'5'}" :fileId.sync="item.fileIds[0]" :showFileList="item.FileList" btnText="上传" :fullWidth="false" :fileSize="20"></uplaod-file><el-input v-model="item.comment" size="small" placeholder="请输入" :disabled="type=='view'" />
element ui form表单循环嵌套 及嵌套表单item的校验方法
贵林之恋的博客
07-26 1851
【代码】element ui form循环嵌套表单 及嵌套表单的验证方法（校验）
Element-Ui表单嵌套循环时的验证
wqewqeasxzcbn的博客
08-26 949
Element-Ui表单嵌套循环时的验证
element表单内嵌表格，table多行数据自定义校验以及自定义传参
卡卡罗特的博客
09-16 1113
element表单多行数据自定义校验以及自定义传参
element表单中一个el-form-item下多个form-item项校验（循环校验）
热门推荐
Ivan的编程随笔
08-28 2万+
在vue+elementUI的项目中，需要对form表单下的一个form item中校验多项数据，如下图： 代码实现（需要注意prop的值）： <template> <el-form :model="form" ref="ruleForm" label-width="100px"> <el-form-item label="负责人" prop="principal" :rules="rules.principal"> <el-input v
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。
Web前端之Element的form校验、表单、嵌套、多层
CSDN博客主页地址：https://mengjian.blog.csdn.net/
08-08 766
Web前端之Element的form校验、表单、嵌套、多层
element-ui关闭弹框后再打开弹框 弹框中的表单进行了验证
weixin_45899022的博客
03-04 2367
问题：打开表单，触发验证后，关闭表单，再重新打开表单时，之前触发的验证还在，如下图所示 解决：在关闭表单时添加下面代码 this.$refs.xxx.resetFields(); 注意： 代码中的 xxx 是你表单中 ref=“xxx” 中的xxx，这两个要一致 ...
element ui form循环嵌套表单 及嵌套表单的验证方法（校验）
weixin_46211267的博客
01-02 1万+
首先看看成果 表单嵌套的增加 嵌套表单的验证 代码展示 直接复制到你的 vue 中就可以展示和进行测试 有问题的话可以提问（数据都是随便写的） <template> <div class="form"> <el-row> <el-col :span="12"> <el-card class="box-card"> <div slot="header" class="clearfi
vue element form表单动态添加的多个表单rules校验
m0_68275786的博客
05-14 576
rules="rules.contactNumber"要单独写一下。
在form表单中嵌套表格动态添加属性检验功能
sky___Show的博客
07-31 474
先贴一张场景图，就是在form表单中，我们嵌套了表格，但是表格的属性是动态添加的，我们需要在动态添加的时候，给每一个属性名都做出检验。我们理解需求之后，我们就开始实现我们的代码
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验
2401_84182842的博客
04-12 3942
觉得这些内容对你有帮助，可以添加VX：vip204888 （备注大数据获取）**[外链图片转存中…(img-5bKrTOm7-1712864789725)]
element-ui form表单的动态rules校验功能、
最新发布
09-28
Element UI 的 Form 表单组件支持动态 rules 校验功能，这意味着可以根据用户的输入或其他条件，在运行时动态地改变验证规则。这在需要复杂或灵活的验证场景下非常有用。例如： 1. **条件式验证**：你可以基于某些字段的值来确定其他字段是否应该被验证，或者验证规则应该如何变化。比如，当某个选项被选中时，才对另一个字段进行必填验证。 2. **异步验证**：通过提供一个返回 Promise 的 validate 函数，可以实现在数据请求完成后执行更复杂的验证逻辑，如检查远程服务器的数据一致性。 3. **自定义验证规则**：可以使用 Vue 自定义指令或者直接在 rules 中编写函数，根据业务需求创建自定义的验证规则。 要在 Element UI 的 Form 表单中使用动态 rules，通常会在 data 对象中定义一个 rules 属性，然后在 methods 或 computed 里定义对应的逻辑，并在 v-bind:rules 绑定到 Form 的 rules 上。 ```javascript <el-form :model="form" :rules="dynamicRules"> <el-form-item label="姓名" prop="name"> <el-input></el-input> </el-form-item> <!-- ... --> </el-form> data() { return { form: {}, dynamicRules: {} }; }, methods: { async validateAsyncField() { // 异步验证逻辑... }, getDynamicRule(field) { // 根据 field 的值动态计算规则... } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值