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 :key='formItem.id'> <el-row> <el-col :span='8'> <el-form-item :label='’字段名稱：’' label-:rules='rules.fieldName' :prop='’formDictExtendDoList.’+index+’.fieldName’' > <el-inputv-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- :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’,// 唯一idvalue: ’選項1’ }, {id: ’item_id_1595641858892’,// 唯一idvalue: ’選項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.fieldNamelet formDictExtendDoListProjectName = formDictExtendDoListItem.projectNameif (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 表單驗證的資料請關注好吧啦網其它相關文章！