当前位置: 首页 > news >正文

解决ElementUI动态表单校验验证不通过

这里记录一下,写项目时遇到的一个问题:就是动态渲染的表单项,加验证规则后一直不通过!!!

原代码

html部分:

     <el-form-itemv-for="(teaclass,index) in addFom.classIds":label="`班级${index+1}`"prop="classId"><el-row :gutter="12"><el-col :span="12"><el-select v-model="teaclass.classId" placeholder="请选择"><el-optionv-for="(item) in filterOptions[index]":label="item.className":value="item.classId":key="item.classId"/></el-select></el-col><el-col :span="5"><el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/></el-col></el-row></el-form-item><el-form-item><el-button type="success" @click="submitTake('ruleForm')">提交</el-button><el-button @click="addClassId" :disabled="disabled">添加班级</el-button></el-form-item>

 js部分:

 return {tableData: [],teaName: '',page: 1,total: 0,pageSize: 12,classData: [],show: false,dra: false,direction: 'rtl',addFom: {teaName: '',teaSex: true,teaType: true,teaPhone: '',seniority: 0,classIds: [{}]},classAll: [],disabled: false,rules: {teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],teaPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }],seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],classId: [{ required: true, message: '请选择班级', trigger: 'change' }]}}

结果: 

 可以看到,按照官网的写法动态渲染的表单项是无法进行校验验证的。这里就是无论选中没选中值都校验不通过。

解决

修改prop、rules

     <el-form-itemv-for="(teaclass,index) in addFom.classIds":label="`班级${index+1}`":prop="'classIds.'+ index + '.classId'":rules="rules.NotEmpty"><el-row :gutter="12"><el-col :span="12"><el-select v-model="teaclass.classId" placeholder="请选择"><el-optionv-for="(item) in filterOptions[index]":label="item.className":value="item.classId":key="item.classId"/></el-select></el-col><el-col :span="5"><el-button type="danger" icon="el-icon-delete" circle @click="removeClassId(index)"/></el-col></el-row></el-form-item>
    rules: {teaName: [{ required: true, message: '请输入教师名称', trigger: 'blur' }],teaSex: [{ required: true, message: '请选择性别', trigger: 'blur' }],teaType: [{ required: true, message: '请选择类型', trigger: 'blur' }],teaPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },{ min: 11, max: 11, message: '请输入长度11位的大陆号码', trigger: 'blur' }],seniority: [{ required: true, message: '请输入教龄', trigger: 'blur' }],NotEmpty: [{ required: true, message: '请选择班级', trigger: 'change' }]}

结果:

http://www.lryc.cn/news/119720.html

相关文章:

  • 深眸科技|发现AI+3D视觉的价值,技术升级加速视觉应用产品国产替代
  • 云计算-知识点大纲
  • 设计模式(2)工厂方法模式
  • 如何创建51单片机KEIL工程
  • openGauss学习笔记-34 openGauss 高级数据管理-SCHEMA
  • 虚拟世界探索:科技之下的未来可能性
  • OSPF技术入门(第三十四课)
  • 春秋云镜 CVE-2022-0948
  • 【资讯速递】AI与人类思维的融合;OpenAI在中国申请注册“GPT-5”商标;移动大模型主要面向to B 智能算力是未来方向
  • TDesign中后台管理系统-用户登录
  • RN 使用react-navigation写可以滚动的横向导航条(expo项目)
  • 单例模式写法的总结(保证线程安全)
  • SQL Server 查询数据并汇总相关技巧 23.08.08
  • 第一章 SpringBoot 介绍-最小配置
  • 10-1_Qt 5.9 C++开发指南_Data Visualization实现数据三维显示
  • [保研/考研机试] KY87 鸡兔同笼 北京大学复试上机题 C++实现
  • Jmeter快捷方式和应用图标设置
  • PHP sm4国密加密解密文件
  • CBCGPRibbon 添加Edit、Combox、Hyperlink控件
  • 漫话拥塞控制:BBR 是个单流模型
  • HTML详解连载(1)
  • 最新版本2023UI千月影视APP源码 开源完美版前后端完美匹配 后端基于ThinkPHP框架
  • centos7安装Docker详细步骤(无坑版教程)
  • Python入门自学进阶-Web框架——39、redis、rabbitmq、git——2
  • 了解IL汇编跳转语句
  • JVM运行时五大数据区域详解
  • Vuex 使用教程
  • springboot启动you will need to add ‘org.slf4j‘ to prefer-application-packages异常解决
  • 云原生核心原则和特征
  • 【ElasticSearch入门】