vue怎样做多层循环表单验证?
Admin 2021-10-19 群英技术资�
vue怎样做多层循环表单验证?表单验证我们之前也有了解过,这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容,实现代码如下,感兴趣的朋友可以参考�
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怎样做多层循环表单验证的介绍啦,本文代码具有一定的借鉴价值,有需要的朋友可以参考学习。最后,想要了解更多可以继续浏览群英网络其他相关的文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
Javascript 完全套用� Java 的位运算符,包括按位�&、按位或|、按位异或^、按位非~、左�<<、带符号的右�>>和用0补足的右�>>>。这套运算符针对的是整数,所以对 JavaScript 完全无用,因� JavaScript 内部,所有数字都保存为双精度浮点数�
响应式基本原理是基于Object.defineProperty(obj, prop, descriptor), descriptor里面可以定义get和set方法,可以在获取属性值事触发get方法(可以收集依赖),设置属性值时触发set方法(更新依赖)�
这篇文章主要为大家介绍了Vue插槽解决父子组件通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
匹配对象。如果有省略号,对象可以有更多的属性。只检测自己的属�(Object.keys),忽略原型中的属性。对象语法支持特殊识别属性,快速属性,属性不支持尾逗号�
tab栏的实现相信大家都比较熟悉了,这篇文章给大家分享的是用JavaScript实现tab栏的方法,本文有详细的思路及代码介绍,对新手学习用JavaScript实现tab栏有一定的帮助,需要的朋友可以参考�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078