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 _THATexportdefault { 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 表单验证的资料请关注其它相关文章！