html
<el-form :model="formObj" :rules="rules" ref="ruleForm"> <el-form-item :label="'护理记录项目配置:'" label-width="180px"> <template v-for="(formItem, index) in formObj.formDictExtendDoList"> <div class="hljl-container" :key="formItem.id"> <el-row> <el-col :span="8"> <el-form-item :label="'字段名称:'" label-width="90px" :rules="rules.fieldName" :prop="'formDictExtendDoList.'+index+'.fieldName'" > <el-input v-model.trim="formItem.fieldName" type="text" :clearable="true" maxLength="100" placeholder="请输入" /> <!--@blur="isRepeat(formItem, index, 'fieldName')"--> </el-form-item> </el-col> <template v-for="(child, index1) in formItem.item" v-show="formItem.type === 2" > <el-col :span="8" :key="child.id"> <el-form-item :label="'选项' + (index1+1) + ':'" label-width="90px" :rules="rules.value" :prop="'formDictExtendDoList.'+index+'.item.'+index1+'.value'" > <el-input v-model.trim="child.value" @input="forceUpdate" :clearable="true" type="text" maxlength="20" placeholder="请输入" /> </el-form-item> </el-col> </template> </el-row> </div> </template> </el-form-item> </el-form>
js
let _THAT export default { name: 'formMangeAdd', data() { return { formObj: { formDictExtendDoList: [] }, rules: { fieldName: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: this.itemValidator, trigger: 'blur' }], value: [{ validator: (rule, value, callback) = > { // I'm a genius. let that = _THAT that.forceUpdate() let field = rule.field let arr = field.split('.') let index = +arr[1] let index1 = +arr[3] let _value = that.formObj.formDictExtendDoList[index].item[index1].value if (_value === '' || _value === null || _value === undefined) { callback(new Error('请输入')) } else { callback() } }, trigger: 'blur' }] } } }, beforeCreate() { _THAT = this }, created() { // 测试数据 let test = [{ id: 'id_1595641858891', // 唯一配置id fieldName: '字段名称', // 字段名称 item: [] }, { id: 'id_1595641858892', // 唯一配置id fieldName: '字段名称', // 字段名称 item: [] }, { id: 'id_1595641858893', // 唯一配置id fieldName: '字段名称', // 字段名称 item: [{ id: 'item_id_1595641858891', // 唯一id value: '选项1' }, { id: 'item_id_1595641858892', // 唯一id value: '选项2' }] }] this.formObj.formDictExtendDoList = test }, methods: { /** * 重复性判断 **/ itemValidator: (rule, value, callback) = > { let that = _THAT that.forceUpdate() let field = rule.field let ruleArr = field.split('.') let index = +ruleArr[1] let type = ruleArr[2] if (value === '') { callback() return false } let arr = [] for (let i = 0; i < that.formObj.formDictExtendDoList.length; i++) { let formDictExtendDoListItem = that.formObj.formDictExtendDoList[i] let formDictExtendDoListFieldName = formDictExtendDoListItem.fieldName let formDictExtendDoListProjectName = formDictExtendDoListItem.projectName if (index !== i) { if (type === 'fieldName') { if (formDictExtendDoListFieldName !== '') { if (formDictExtendDoListFieldName === value) { arr.push(i) } } } } } if (arr.length !== 0) { if (type === 'fieldName') { callback(new Error('与配置' + (+arr[0] + 1) + '的字段名称重复')) setTimeout(function() { that.formObj.formDictExtendDoList[index].fieldName = '' }, 500) } } else { callback() } }, forceUpdate() { this.$forceUpdate() } } }
以上就是vue + el-form 实现的多层循环表单验证的详细内容,更多关于vue 表单验证的资料请关注站长技术其它相关文章!
2月3日消息 微软名为 PowerToys 的免费系统实用工具套件从 Windows XP 时代复活...
文章目录 系列简介 分析网页 代码实现 拓展延伸 系列简介 将我的“爬虫百战穿山...
最近在学习jQuery时接触到了show()、hide()、toggle()函数,于是利用这几个函数...
平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用...
自 2020 年 1 月发布 5.5 内核之后,到现在已经有近 87,000 个补丁,来自于近 46...
有两种方式可以实现input的只读效果:disabled 和 readonly。 自然两种出来的效...
需求 1.日志自动写入到数据库、写入到文件 2.appsettings.json数据库连接更改后...
3月7日消息 外媒 Windows Latest 报道,微软在 Build 2020 开发者大会上首次公布...
前言 Attribute(特性)的概念不在此赘述了,相信有点.NET基础的开发人员都明白...
学生管理系统课程设计 文章目录 一课程设计目的 二课程设计内容和要求 三任务完...