vue动态表单添加表单验证

最新推荐文章于 2024-06-08 11:45:08 发布
最新推荐文章于 2024-06-08 11:45:08 发布
阅读量629 收藏
点赞数
分类专栏： 前端 文章标签： 前端 javascript html vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43931653/article/details/128220518
版权 
            <el-form ref="conditionListForm" :rules="ConditionListRules" :model="scope.row.conditionListForm">
              <el-table
                ref="conditionListDia"
                :data="scope.row.conditionListForm.conditionListDia"
                border
                :header-cell-style="background"
                style="width: 100%"
                size="mini"
              >
                <el-table-column label="限制条件名称" align="center">
                  <el-table-column
                    label="条件组合"
                    align="center"
                    size="mini"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionRelation' " :rules="ConditionListRules.conditionRelation">
                        <el-select
                          v-model="scopeChild.row.conditionRelation"
                          :disabled="scope.row.conditionListForm.conditionListDia.length > 1 || scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="showconditionRelation(scopeChild.row.conditionRelation)"
                        >
                          <el-option
                            v-for="item in compositionConditionList"
                            :key="item.key"
                            :disabled="item.baseDataStatus==='0'"
                            :label="item.label"
                            :value="item.key"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件分组"
                    size="mini"
                    align="center"
                    min-width="30"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].medalConditionClassname' " :rules="ConditionListRules.medalConditionClassname">
                        <el-select
                          v-model="scopeChild.row.medalConditionClassname"
                          :disabled="scope.row.id > 0"
                          size="mini"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="defDataClick(scopeChild)"
                        >
                          <el-option
                            v-for="item in fatherNameList"
                            :key="item.id"
                            :label="item.medalConditionClassname"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="条件"
                    size="mini"
                    align="center"
                    min-width="40"
                  >
                    <template slot-scope="scopeChild">
                      <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionId' " :rules="ConditionListRules.conditionId">
                        <el-select
                          v-model="scopeChild.row.conditionId"
                          size="mini"
                          :disabled="scope.row.id > 0"
                          placeholder="请选择"
                          clearable
                          style="float:left;width:95%"
                          @change="getRelationship(scopeChild.row.conditionId,scopeChild.row.medalConditionClassnameList,scopeChild.row)"
                        >
                          <el-option
                            v-for="item in scopeChild.row.medalConditionClassnameList"
                            :key="item.defId"
                            :label="item.medalConditionName"
                            :value="item.defId"
                          />
                        </el-select>
                      </el-form-item>
                    </template>
                  </el-table-column>
                </el-table-column>
                <el-table-column
                  label="运算关系"
                  align="center"
                  size="mini"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionOperation' " :rules="ConditionListRules.conditionOperation">
                      <el-select
                        v-model="scopeChild.row.conditionOperation"
                        size="mini"
                        placeholder="请选择"
                        :disabled="scope.row.id > 0"
                        clearable
                        style="float:left;width:95%"
                        @change="conditionOperationEmpty(scopeChild.row)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionOperationValueList"
                          :key="item.key"
                          :disabled="item.baseDataStatus==='0'"
                          :label="item.value"
                          :value="item.key"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column
                  label="值"
                  align="center"
                  size="mini"
                  min-width="120"
                >
                  <template slot-scope="scopeChild">
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '0'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-select
                        v-model="scopeChild.row.conditionTrueValueList"
                        multiple
                        style="float:left;width:95%"
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '1'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input
                        v-model="scopeChild.row.conditionValue"
                        clearable
                        placeholder="请输入"
                        align="center"
                        style="float:left;"
                        size="mini"
                        maxlength="60"
                        show-word-limit
                        @blur="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '2'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-date-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        size="mini"
                        end-placeholder="结束日期"
                        style="float:left;width:95%"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '3'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-select
                        v-model="scopeChild.row.conditionValue"
                        style="float:left;width:95%"
                        size="mini"
                        clearable
                        placeholder="请选择"
                        @change="conditionValueEmpty(scopeChild)"
                      >
                        <el-option
                          v-for="item in scopeChild.row.conditionValueList"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType === '4'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionTrueValueList' " :rules="ConditionListRules.conditionTrueValueList">
                      <el-time-picker
                        v-model="scopeChild.row.conditionTrueValueList"
                        style="float:left;width:95%"
                        size="mini"
                        is-range
                        clearable
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"
                        format="HH:mm"
                        @change="conditionValueEmpty(scopeChild)"
                      />
                    </el-form-item>
                    <el-form-item v-if="scopeChild.row.medalConditionControlType == '5'" :prop=" 'conditionListDia[' + scopeChild.$index + '].conditionValue' " :rules="ConditionListRules.conditionValue">
                      <el-input-number v-model="scopeChild.row.conditionValue" size="mini" :min="0" label="" @change="conditionValueEmpty(scope)" />
                    </el-form-item>

                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  align="center"
                  min-width="50"
                >
                  <template slot-scope="scopeChild">
                    <el-button type="text" :disabled="scope.row.id > 0" @click="delCondition(scope.$index,scope.row.conditionListForm.conditionListDia,scopeChild.row,scopeChild.$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>




 ConditionListRules: {
    conditionRelation: [
      { required: true, message: '条件组合不能为空', trigger: 'change' }
    ],
    medalConditionClassname: [
      { required: true, message: '条件分组不能为空', trigger: 'change' }
    ],
    conditionId: [
      { required: true, message: '条件不能为空', trigger: 'change' }
    ],
    conditionOperation: [
      { required: true, message: '运算关系不能为空', trigger: 'change' }
    ],
    conditionValue: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ],
    conditionTrueValueList: [
      { required: true, message: '值不能为空', trigger: 'change' }
    ]
  },

主要就是prop的问题，prop要对应到数据。

TankWide
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证等
共同学习，共同成长
07-15 2332
大家好，我是码喽的自我修养！今天给大家分享vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证规则、validateField 验证具体的某个某些字段等，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
12-12
前言 开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的，所以要遍历生成； 2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单，那我们的写法就要写成: 重点在prop属性 <template v-
vue+element 动态表单验证
weixin_30376163的博客
09-04 514
公司最近的项目有个添加动态表单的需求，总结一下我在表单验证上遇到的一些坑。 如图是功能的需求，这个功能挺好实现的，但是表单验证真是耗费了我一些功夫。 vue+element在表单验证上有一些限制，必须依照element示例的格式才能验证通过。 附上代码： 1 <el-form :model="dynamicValidateForm" ref="dynami...
vue：element-ui表单动态验证规则
coinisi_li的博客
01-22 6052
实现当是否发送消息选择是时，业务类型字段必填。
Vue之动态表单的实现及校验
Allen-Ye博客
05-08 3332
在实际开发中，我们会遇到动态表单以及需要对表单做校验，这边说下我这边的一个需求，原型是这样的 当我点击新增答疑问题四，就会在第一下面添加一个答疑二，跟答疑一一样，我们这么的数据类型就是一个大的对象，然后答疑详情又是数组，数组里面包含各个对象表示的是一个个答疑点，比如答疑一这样，现在我们来看看数据类型 formData:{ id:'', taskId:'', supplierName:'', supplierId:
vue针对动态生成的表单el-form进行提交校验
最新发布
liao3399084的博客
06-08 441
2、前端将得到的各个空闲人员的薪酬方式、出勤类型等进行填写。需要对所有空闲人员的考勤信息进行管理。4、当每个对象校验通过时，予以提交保存。1、后台得到所有的空闲人员名单数组。3、对指定填写内容进行必填项校验。
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
Vue+Element实现动态生成新表单并添加验证功能
10-16
在Vue.js框架中与Element UI组件库结合实现动态表单生成以及表单验证是一个相当实用的技术应用场景。本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识...
动态表单：VUE动态表单
08-13
Iview的Table组件支持动态添加和删除行，结合Vue的数组操作方法（push、pop、splice等）可以轻松实现这一功能。同时，可以设置一个弹窗，在其中进行更复杂的单元格编辑。 5. **表单验证**：Vue和Iview都提供了强大...
vue动态绑定组件子父组件多表单验证功能的实现代码
08-27
Vue 动态绑定组件子父组件多表单验证功能的实现代码 Vue 动态绑定组件子父组件多表单验证功能的实现代码是指在 Vue 项目中，使用动态绑定组件来实现子父组件之间的交互和验证的功能。这种方法可以解决前端项目中...
策略模式实现 Vue 动态表单验证的方法
12-03
总的来说，策略模式在Vue动态表单验证中的应用提高了代码的灵活性和可维护性，使得添加新验证规则或修改现有规则变得简单，而不会对原有代码造成过多影响。在实际开发中，结合ES6的新特性，如箭头函数、let/const和...
vue2动态表单验证与表单多层嵌套验证
fangqi20170515的博客
11-11 3092
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop。注意v-for，要将。
vue- form动态表单验证规则-表单验证
路虽远行则将至，事虽难做则必成。
08-04 1621
以element官网的form表单的-动态增减表单项为例讲解表单验证规则动态的功能就是v-model配合push + v-for 便利来实现的我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的，如果是一个数组便利的表单，那就需要绑定这个数组每一项v-model值。
VUE动态表单校验
jing2623的博客
10-14 1847
VUE动态表单校验 功能描述 用户可以添加一个员工，也可以同时添加多个员工，但是每个员工的对应表单都存在表单校验 效果图 代码如下 <!-- --> <template> <div class=''> <!-- 添加员工信息弹出层 --> <el-dialog title="添加员工" :visible.sync=...
Vue Element UI动态生成的表单并校验
哈哈哈，呜呜呜
07-10 2395
表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定。通常是用于 input 的双向绑定，但是它不会向子组件传递数据。
vue动态表单怎么添加验证_Vue 动态表单验证
weixin_39750195的博客
01-26 2132
核心操作：FormItem 的 :prop 需要与控件的 v-model 有一致的路径。 由于验证完成后需要判断值是否为空，那这个时候需要有个地方可以映射到这个值，此时:prop这个这个值对应的就是key在固定表单需求中，通过指定 :prop，:rules 即可等到验证功能，但是对于动态生成的表单，业务逻辑来说，也就是需要动态生成 :prop 与 :rules。比如说：<Form :mode...
vue2+elementui,动态生成的表单校验
yuzheh521的博客
06-06 573
最主要的地方,因为我是双层的循环遍历,先看第一层的注意地方。话不多,先上一段视频,看看是不是你们需要的效果。最最最最最最最主要的地方,这是第二层的地方。elementui动态生成表单校验。
vue动态表单验证
05-29
Vue动态表单验证可以通过使用Vue的指令和计算属性来实现。以下是一个简单的示例： 1. 首先，我们需要定义一个包含表单字段的数据对象，并设置验证规则： ``` data() { return { formData: { name: '', email: '', password: '', confirmPassword: '' }, rules: { name: [ { required: true, message: '请输入姓名', trigger: 'blur' } ], email: [ { required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, message: '密码长度不能小于6位', trigger: 'blur' } ], confirmPassword: [ { required: true, message: '请再次输入密码', trigger: 'blur' }, { validator: this.validateConfirmPassword, trigger: 'blur' } ] } } }, ``` 2. 接下来，我们需要在模板中使用Vue指令来绑定表单字段和验证规则： ``` <el-form ref="form" :model="formData" :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="formData.email"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="formData.password"></el-input> </el-form-item> <el-form-item label="确认密码" prop="confirmPassword"> <el-input type="password" v-model="formData.confirmPassword"></el-input> </el-form-item> </el-form> ``` 3. 最后，我们需要定义验证函数，并将其作为验证规则的一部分： ``` methods: { validateConfirmPassword(rule, value, callback) { if (value !== this.formData.password) { callback(new Error('两次输入的密码不一致')) } else { callback() } } } ``` 通过这种方式，我们可以轻松地实现动态表单验证，并在用户输入时进行实时验证。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值