站长资源网络编程
vue + el-form 实现的多层循环表单验证
简介html
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 + el-form 实现的多层循环表单验证的详细内容，更多关于vue 表单验证的资料请关注其它相关文章！