antd a-form-model 动态表单 自定义校验柯里化

2023-11-18

1. 需求

  1. 前端通过后端字段遍历formItem
  2. 由于字段可能是金额。电话号码等,单独if太多了太麻烦,所以想到柯里化

2. 代码

// 响应请求
xxx().then(res => {
        if (res.data.list.length == 0) {
          return false;
        }
        res.data.list.forEach(res => {
          this.$set(this.form, res.name, res.value); 
          // 动态添加校验规则
          this.rules[res.name] = {
            validator: curryingCheck(res.showtype,res.showname),
            required: true,
            trigger: "blur"
          };
        });
        // html通过遍历changeField得出表单
        this.changeField = res.data.list;
  });
export const isPrice = (rule, value, callback) => {
    const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
    if (value == '' || value == undefined || value == null) {
        callback('请输入金额!');
    } else {
        if ((!reg.test(value)) && value != '') {
            callback(new Error('请输入正确的金额!'));
        } else {
            callback();
        }
    }
}
export const isdefault = (rule, value, callback, text) => {
    if (value == '' || value == undefined || value == null) {
        callback(`请输入${text}`);
    }else{
        callback()
    }
}
//柯理化
export const curryingCheck = (type, limit) => {
	// 设置金额的type为2  这个值应当由后段传给我们
    let obj = { '2': isPrice }
    return function (rule, value, callback) {
        return !obj[type] ? isdefault(rule, value, callback, limit) : obj[type](rule, value, callback,...limit)
    }
}

3. 效果

相关数据

list = [
	{
		name: "diseasename",
		showname: "疾病名称",
		showtype: 1,
		value: "11"
	},
	{
		name: "totalmedicalexpenses",
		showname: "医疗总费",
		showtype: 2,
		value: 1,
	}
]

在这里插入图片描述
在这里插入图片描述

3. 小结

貌似element也是用的同个校验方法,通过这种方法就不用去if单个校验类型了,需要的话直接在校验里面添加校验规则就可以了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

antd a-form-model 动态表单 自定义校验柯里化 的相关文章

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • Twitter 卡元标签问题

    有问题的网址 https www halleonard com viewpressreleasedetail action releaseid 10261 https www halleonard com viewpressreleased
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 可以在初始 DOM 解析期间/之前修改 DOM 吗?

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 从数据库检查数据的异步解决方案各种循环子句

    我想要做的是异步检查数据库并从中获取结果 在我的应用程序中我试图实现Asynchronously将此步骤解决为 从数据库中检查手机号码JsonArray循环子句的种类 Create JsonArray从结果 打印创建的数组 我学到了足够多的
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理
  • 使用 Vue 的多模式组件

    我在 Vue 中实现动态模式组件时遇到问题 A common approach I follow to display a set of data fetched from the db is I dump each of the rows
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 代码镜像错误:未捕获错误:扩展集中无法识别扩展值([对象对象])

    全部 我目前正在从事一个React Electron项目 该项目的目标是完成一个Markdown编辑器 当我配置codemirror 该程序报告错误说 Uncaught Error Unrecognized extension value
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro

随机推荐

  • 如何学会像优秀程序员一样思考

    如何学会像优秀程序员一样思考 程序员的思考方式比较有意思 并且这些思考方式有时候表现得很好 这些思考方式其实可以概述下 通常包含如下几个点 一切都只是数据 数据本身没有任何意义 如果有意义那么它必须被解释 编程是关于创建和组合抽象 模型是给
  • 内容管理软件——Obsidian、Zettlr学习笔记(附Typora)

    一 Obsidian 1 官网 Obsidian 2 学习教程 Obsidian 中文论坛 3 使用经验 3 1关于markdown常用格式 标题的格式 标题级数 空格 文本内容 这是一段普通的文本 这是一级标题 这是二级标题 这是三级标题
  • ChatGPT在生态保护和可持续发展中的潜在作用如何?

    ChatGPT在生态保护和可持续发展领域具有潜在的重要作用 生态保护和可持续发展是全球性的挑战 涉及到环境保护 资源管理 气候变化应对 生物多样性保护等多个方面 ChatGPT作为一种人工智能技术 可以在以下几个方面发挥积极作用 1 数据分
  • ELK(六)ElasticSearch快速入门_中文分词

    分词 分词就是指将一个文本转化成一系列单词的过程 也叫文本分析 在ElasticSearch中称之为Analysis 举例 我是中国人 gt 我 是 中国人 分词API 指定分词器进行分词 POST analyze analyzer sta
  • 【深度学习】详解 Swin Transformer (SwinT)

    目录 摘要 一 介绍 二 原理 2 1 整体架构 2 1 1 Architecture 2 1 2 Swin Transformer Block 2 2 基于移位窗口的自注意力 2 2 1 非重叠局部窗口中的自注意力 2 2 2 在连续块中
  • 图像分割必备知识点

    文章转自 微信公众号 机器学习炼丹术 文章转载或者交流联系作者微信 cyx645016617 Unet其实挺简单的 所以今天的文章并不会很长 喜欢的话可以参与文中的讨论 在文章末尾点赞 在看点一下呗 0 概述 语义分割 Semantic S
  • GoogleCast 简介

    Google Cast Function 依赖com android support mediarouter v7com google android gms play services cast frameworkCast 过程1 fra
  • 笔记本电池冲不进电或不存电的修复方法

    不少同学的本本 用不到2年电池就坏掉了不存电 几分钟就一泻千里 成了那啥 哈哈 别想多了 还有的本本因为放的太久了 几个月没充电 发现电池冲不进去电了 这个更糟进不去都 哎 这是怎么回事呢 其实电池并没有那么脆弱 电池电芯都是锂离子的 可千
  • 深度学习 训练吃显卡_深度学习为什么需要显卡计算?

    先解释一点 深度学习为什么需要显卡计算 GPU 是为大规模的并行运算而优化 GPU 上则更多的是运算单元 整数 浮点的乘加单元 特殊运算单元等等 GPU 往往拥有更大带宽的显存 因此在大吞吐量的应用中也会有很好的性能 这里有一个很有趣的解释
  • Java对象的实例化过程

    JAVA new流程 实例化过程 java对象的实例化过程
  • 主成分分析法(三):计算步骤

    主成分分析系列 主成分分析 一 基本思想与主成分估计方法 主成分分析 二 特征值因子的筛选 主成分分析法 三 计算步骤 目录 一 主成分分析简述 二 主成分分析法的步骤 1 对原始数据进行标准化处理 2 计算相关系数矩阵R 3 计算特征值和
  • pip install总是报错:ValueError: Trusted host URL must include a host part: ‘#‘

    一 问题现象 报错信息如下 Traceback most recent call last File user name anaconda3 bin pip line 11 in
  • Matlab求解基于RRT算法的自定义垛型的路径避障

    目录 背景 1 RRT搜索算法 2 基于Matlab的RRT搜索算法 3 基于Matlab的自定义垛型绘制 4 基于RRT算法的自定义垛型的路径避障 背景 在码垛机械臂路径规划过程中 需要根据现有箱子的码垛状态 给出下一个箱子的最佳码放无碰
  • 自定义一个softirq

    本文章添加自己定义一个额外的软中断 首先添加软中断种类 MY SOFTIRQ enum HI SOFTIRQ 0 TIMER SOFTIRQ NET TX SOFTIRQ NET RX SOFTIRQ BLOCK SOFTIRQ BLOCK
  • c语言之-umask()函数

    此函数的主要作用是在创建文件时设置或者屏蔽掉文件的一些权限 一般与open 函数配合使用 umask 设置建立新文件时的权限遮罩 相关函数 creat open 表头文件 sys types h sys stat h 定义函数 mode t
  • java数据类型陷阱_java学习_3.原生数据类型使用陷阱

    原生数据类型使用陷阱 Pitfall of Primitive Data Type 1 Java中的原生数据类型共有8种 1 整型 使用int表示 32位 2 字节型 使用byte表示 表示 128 127之间的256个整数 8位 3 短整
  • 8 种流行的计算机视觉应用

    计算机视觉是人工智能的一部分 它使计算机能够从计算机化的图片 视频中获取重要数据 并根据这些数据提出建议 简单地说 你可以理解 如果人工智能允许计算机思考 那么计算机视觉就会鼓励它们去看 注意到和理解 这是在深度学习和机器学习的帮助下完成的
  • 深入理解Solidity——作用域和声明

    作用域和声明 Scoping and Declarations 已声明的变量将具有其字节表示为全0的初始值 变量的初始值是任何类型的典型 零状态 zero state 例如 bool的初始值为false uint或int类型的默认值为0 对
  • FBX SDK的环境配置与FbxLine结构的输出

    FBX SDK的环境配置与FbxLine结构的输出 近期项目中 用到了FBX SDK 根据官网教程与博客等相关资料 在使用过程中主要发现了两点问题 1 FBX SDK的环境配置网上说法不一 2 FbxLine结构体官网教程没有给出具体例子
  • antd a-form-model 动态表单 自定义校验柯里化

    1 需求 前端通过后端字段遍历formItem 由于字段可能是金额 电话号码等 单独if太多了太麻烦 所以想到柯里化 2 代码 响应请求 xxx then res gt if res data list length 0 return fa