html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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 表單驗證的資料請關注服務器之家其它相關文章！
原文鏈接：http://xiaowiba.com/archives/1179/
