vue element 动态增加表单并进行表单验证

已于 2025-04-11 15:56:58 修改
阅读量946 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
于 2022-12-07 13:36:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/FellAsleep/article/details/128218608
版权
本文介绍了在Vue Element中如何对动态增加的表单进行验证。关键在于使用:prop与v-for结合，如:prop=“'cloudAccounts.' + index + '.objectDetails'”，其中cloudAccounts是v-for遍历的数组，index是索引，objectDetails是表单v-model绑定的字段。同时，v-for的写法也需包含表单的model名。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

表单验证：
需要注意的一点是：

普通表单验证单项依靠的是prop…而动态生成的表单要用:prop

书写的语法是:prop=“‘cloudAccounts.’ + index +’.objectDetails’”，cloudAccounts是v-for绑定的数组，index是索引，objectDetails是表单绑定的v-model的名称，然后用.把他们链接起来。

所以总结起来的语法就是:prop=“‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’”

还有一个需要注意就是v-for的写法，要将表单的model名写进去

<div class="moreRulesIn" v-for="(item, index) in addForm.cloudAccounts" :key="item.key">

<template>
  <div>
    <el-dialog
      title="添加银联账号"
      :visible="addYlyaccountShowDialog"
      top="6vh"
      @close="handleClose"
      :before-close="beforeClose"
      width="70%"
    >
      <el-form ref="form" :model="addForm" label-width="180px">
        <div class="moreRules">
          <div style="margin: 0px 0px 20px 20px">
            <el-button @click="addUser" size="medium" type="primary"
              >增加</el-button
            >
            <el-button @click="initData" size="medium" type="danger"
              >清空</el-button
            >
          </div>
          <div
            class="moreRulesIn"
            v-for="(item, index) in addForm.cloudAccounts"
            :key="item.key"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="银联主账号ID"
                  :prop="'cloudAccounts.' + index + '.accountTenantId'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.accountTenantId"
                    placeholder="请输入银联主账号ID"
                    type="number"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联主账号"
                  :prop="'cloudAccounts.' + index + '.primaryAccountUsername'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.primaryAccountUsername"
                    placeholder="请输入银联主账号"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联主账号密码"
                  :prop="'cloudAccounts.' + index + '.primaryAccountPassword'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.primaryAccountPassword"
                    placeholder="请输入银联主账号密码"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联主账号SecretId"
                  :prop="'cloudAccounts.' + index + '.primarySecretId'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.primarySecretId"
                    placeholder="请输入银联主账号密钥ID"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联主账号SecretKey"
                  :prop="'cloudAccounts.' + index + '.primarySecretKey'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.primarySecretKey"
                    placeholder="请输入银联主账号密钥KEY"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联子账号"
                  :prop="'cloudAccounts.' + index + '.childAccountUsername'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.childAccountUsername"
                    placeholder="请输入银联子账号"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联子账号密码"
                  :prop="'cloudAccounts.' + index + '.childAccountPassword'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.childAccountPassword"
                    placeholder="请输入银联子账号密码"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联子账号SecretId"
                  :prop="'cloudAccounts.' + index + '.childSecretId'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.childSecretId"
                    placeholder="请输入银联子账号密钥ID"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="银联子账号SecretKey"
                  :prop="'cloudAccounts.' + index + '.childSecretKey'"
                  :rules="[{ required: true, message: '请完善信息' }]"
                >
                  <el-input
                    v-model.trim="item.childSecretKey"
                    placeholder="请输入银联子账号密钥KEY"
                    class="el-select_box"
                    maxlength="40"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24" align="center">
                <el-button
                  @click="deleteRules(item, index)"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </div>
      </el-form>
      <template v-slot:footer>
        <el-button style="" type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reqBatchSaveOrUpdateCloudAccounts } from "@/api/account";
export default {
  name: "YSYPRODUCTAddYlyaccount",
  props: {
    addYlyaccountShowDialog: {
      type: Boolean,
    },
  },
  data() {
    return {
      addForm: {
        // content: "",
        cloudAccounts: [
          {
            accountTenantId: "",
            primaryAccountUsername: "",
            primaryAccountPassword: "",
            primarySecretId: "",
            primarySecretKey: "",
            childAccountUsername: "",
            childAccountPassword: "",
            childSecretId: "",
            childSecretKey: "",
            type: "unionpay",
          },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    //清空
    initData() {
      this.addForm.cloudAccounts = [];
    },
    //添加
    addUser() {
      this.addForm.cloudAccounts.push({
        accountTenantId: "",
        primaryAccountUsername: "",
        primaryAccountPassword: "",
        primarySecretId: "",
        primarySecretKey: "",
        childAccountUsername: "",
        childAccountPassword: "",
        childSecretId: "",
        childSecretKey: "",
        type: "unionpay",
      });
    },
    //单项删除
    deleteRules(item, index) {
      this.index = this.addForm.cloudAccounts.indexOf(item);
      if (index !== -1) {
        this.addForm.cloudAccounts.splice(index, 1);
      }
    },
    //确认
    async onSubmit() {
      console.log(this.addForm.cloudAccounts);
      this.$refs.form.validate(async (vaild) => {
        if (!vaild) return;
        const res = await reqBatchSaveOrUpdateCloudAccounts(this.addForm);
        console.log(res);
        if (res.code === 200) {
          this.$message.success("新增银联账号成功");
          this.handleClose();
          this.$emit("getlistPageCloudUnionPayAccounts");
        }
      });
    },
    // 关闭弹层
    handleClose() {
      this.$emit("update:addYlyaccountShowDialog", false); // 关闭弹窗
      this.$refs.form.resetFields(); // 重置校验表单
      this.addForm.cloudAccounts = [
        {
          accountTenantId: "",
          primaryAccountUsername: "",
          primaryAccountPassword: "",
          primarySecretId: "",
          primarySecretKey: "",
          childAccountUsername: "",
          childAccountPassword: "",
          childSecretId: "",
          childSecretKey: "",
          type: "unionpay",
        },
      ];
    },
    // 关闭弹层
    async beforeClose(done) {
      const confirmResult = await this.$confirm(
        "内容还未保存，此操作会导致信息丢失！是否继续？",
        "温馨提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult === "cancel") return;
      done();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

参考自：vue element 动态增加表单并进行表单验证

Vue+Element实现动态生成新表单并添加验证功能
10-16
主要介绍了Vue+Element实现动态生成新表单并添加验证功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行验证。 4. 动态添加和删除操作： 在实际应用中，往往需要支持用户在表单中动态添加或删除字段。Vue的数组操作方法（如push、...
vue+elementUI实现动态增加表单项并添加验证
祖先生的博客
08-04 8572
参考elementUI官网以及网上的其他一些资料。话不多说，直接贴代码。 htmt部分： <el-form :model="environmentForm" ref="environmentForm"> <el-row :gutter="24" v-for="(item, index) in environmentForm.items" :key="item.key" >
Vue2 + ElementUI 实现动态form表单校验
最新发布
qq_44178552的博客
04-15 287
Vue2 + ElementUI 实现动态form表单校验。
Vue+Element动态生成新表单并添加验证
攻城喵小猫的博客
02-28 4575
Vue+Element动态生成新表单并添加验证 首先，有这样一个需求，表单中默认有表单项，点击新增，会多出一项。 点击之后 官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果 代码如下 &amp;lt;div class=&quot;item_tit&quot;&amp;...
element-ui实现动态添加表单项并实现事件触发验证验证
qq_45118892的博客
02-18 4222
实现动态添加表单活动
vue + element UI 实现动态表单并添加验证
m0_51521594的博客
06-28 1022
动态 prop 写法 :prop="'cloneCustomList.' + i +'.DefaultValue'"
vue element动态渲染、移除表单并添加验证的实现
12-07
总的来说，通过Vue.js的响应式数据绑定和Element UI的表单组件，我们可以轻松地实现动态渲染、移除表单以及相应的验证。关键在于理解`v-for`循环、动态`prop`和验证规则的设置。在实际开发中，可能还需要根据具体...
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
10-17
在Element UI中，使用`<el-form>`组件来创建表单，并通过`v-for`指令进行循环渲染。每个表单项使用`<el-form-item>`定义，其中的`label`显示标签，`prop`对应表单数据对象中的属性名。在表单项内部，使用`<el-input>...
ElementUI动态添加表单项
chao的博客
08-10 1446
其实就是利用了vue的v-for循环渲染。通过添加数组实现动态添加表单项。
vue+element动态表单验证
deary
10-08 801
【代码】vue+element动态表单验证。
ElementUI动态添加表单及验证
qq_27132803的博客
12-27 572
element ui 动态添加表单实现验证规则
qwyio的博客
11-14 8532
动态增减表单验证规则的实现和思路，简单实现表单的增删 ，并且对新增表单项及默认表单项进行必填项校验
el-form动态表单验证
weixin_46011719的博客
06-19 763
el-form动态通过json生成表单，并设置验证规则
elementui动态添加表格
weixin_53325981的博客
09-07 1219
【代码】elementui动态添加表格。
element-ui 动态添加表单校验
Hanx_的博客
03-21 580
问题：手机号校验没加上，还不知道怎么写，待研究。如果姓名跟手机没输入，会错误提示。
element ui 新增动态表单
weixin_49986131的博客
01-19 2310
以下代码： <div v-for="(item, index) in addForm.domains" :key="index"> <el-form-item label="联系人" :prop="'domains.' + index + '.contactss'" :rules="{ required: true, message: '联系人不能为空', trigger: 'blur' }" > <el-input.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值