vue + el-form 實現的多層迴圈表單驗證
阿新 • • 發佈:2020-11-26
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: 'id_1595641858893',// 欄位名稱 item: [{ id: 'item_id_1595641858891',// 唯一id value: '選項1' },{ id: 'item_id_1595641858892',// 唯一id value: '選項2' }] }] this.formObj.formDictExtendDoList = test },methods: { /** * 重複性判斷 **/ itemValidator: (rule,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 表單驗證的資料請關注我們其它相關文章!