vue如何做多层循环表单验证？
发布时间：2022-01-13 11:39:12 所属栏目：语言 来源：互联网
导读：vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容，实现代码如下，感兴趣的朋友可以参考。 html el-form :model=formObj :rules=rules ref=ruleForm el-form-item :label=护
|
vue怎样做多层循环表单验证？表单验证我们之前也有了解过，这篇主要给大家分享的是使用vue + el-form 实现的多层循环表单验证的内容，实现代码如下，感兴趣的朋友可以参考。 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' }] } } }, （编辑：晋中站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
