码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • Vue+iview 组件中通过v-for循环动态生成form表单进行表单校验


    在做项目时,需要根据需要动态添加或新增表单,同时还需要对表单做校验。详情如下图:

    刚开始做表单验证的时候,对于这个动态的表单验证有点难搞,试了好几种方法都没有搞定。最后按照下面这种方法实现了,以此篇博客留作记录,方便下次遇到类似的需求时直接开发。

    1. <row v-for="(item,index) in dataList">
    2. <i-Form :model="item" :ref="'dataList'+index" :label-width="language=='en'?140:120">
    3. <i-col span="10" >
    4. <Form-Item label="<@s.message code ="KSGL.LABLE.KAOSHIRQI"/>" :rules="[{required: true, message: '必填'}]"A prop="ksrqs">
    5. <date-picker :value="item.ksrqs" @on-change="item.ksrqs=$event" format="yyyy-MM-dd" type="date" placeholder="" style="width: 200px">date-picker>
    6. Form-Item>
    7. i-col>
    8. <i-col span="10" >
    9. <Form-Item label="备注1" prop="bz">
    10. <i-Input type="text" v-model="item.bz">i-Input>
    11. Form-Item>
    12. i-col>
    13. <i-col span="4" >
    14. <i-Button size="small" type="error" @click="handleRemove(index)"><@s.message code ='ACTION.REMOVE'/>i-Button>
    15. i-col>
    16. i-Form>
    17. row>

    1. let arr = [];
    2. for (var i=0;idataList.length;i++){
    3. let form = 'dataList' + i;
    4. self.$refs[form][0].validate((valid) => {
    5. if (valid) {
    6. arr.push(true);
    7. } else {
    8. arr.push(false);
    9. }
    10. });
    11. }
    12. let flag = arr.every((item) => {
    13. console.log('item',item)
    14. return item === true;
    15. });
    16. if (flag) {
    17. self.$Modal.confirm({
    18. title: i18n('MODEL.CONFIRM_TITLE'),
    19. content: i18n('MODEL.CONFIRM_CONTENT'),
    20. //loading: true,
    21. okText: i18n('MODEL.CONFIRM_OK_TEXT'),
    22. cancelText: i18n('MODEL.CONFIRM_CANCEL_TEXT'),
    23. onOk: function() {
    24. },
    25. onCancel: function() {
    26. self.$Message.info({content:i18n('MODEL.CONFIRM_ON_CANCEL'),duration: 10,background: true,closable: true});
    27. }
    28. });
    29. } else {
    30. self.$Message.error({content:i18n('VALIDATE.FORM_ERROR'),duration: 10,background: true,closable: true});
    31. }

  • 相关阅读:
    【小技巧】WPS统计纯汉字(不计标点符号)
    MySQL Explain执行计划key_len详解(特意针对date和datetime详细测试说明)
    SSTI服务端模板注入漏洞原理详解及利用姿势集锦
    金融机构系统性风险分析(Domestic+MES模型)200701-202012
    SpringBoot中如何获取request对象呢?
    05 参数的点估计
    全局配置-window和tabBar
    java基础07
    题目 1059: 二级C语言-等差数列(python详解)——练气四层后期
    某职业学院未落实网络安全等级保护制度造成数据泄露——等保测评
  • 原文地址:https://blog.csdn.net/ding43930053/article/details/133271076
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号