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 动态表单 自定义校验柯里化 的相关文章

  • 如何在 JavaScript 中检查未定义的变量

    我想检查变量是否已定义 例如 以下内容会引发未定义的错误 alert x 我怎样才能捕获这个错误 在 JavaScript 中 null是一个对象 不存在的事物还有另一种价值 undefined DOM 返回null对于几乎所有无法在文档中
  • 确定用户是否在shadow dom之外单击

    我正在尝试实现一个下拉菜单 您可以单击外部将其关闭 下拉列表是自定义日期输入的一部分 并且封装在输入的影子 DOM 内 我想写一些类似的东西 window addEventListener mousedown function evt if
  • 如何在 .js 中的字符串中插入来自 ruby​​ 示例的变量[重复]

    这个问题在这里已经有答案了 在 ruby 中 您可以将变量插入到字符串中 如下所示 x sake puts I like x I like sake 例如 def what i like word I like word end 在 jav
  • 如何使

    我有一个列表 用作选项卡列表 div ul class TabControl li a href search Funds Funds 60 a li li a href search Companies Companies 4 a li
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • 如何使用 Selenium webdriver 测试对 SVG 对象的点击?

    我正在尝试编写代码来检查单击 SVG 对象的功能 例如此 URL 上的美国州 http www amcharts com svg maps map usa 这可行 但是有更好的方法吗 不需要物理移动鼠标的东西 robert new Robo
  • 有效地获取下拉列表中的选定选项(XHTML Select 元素)

    背景 使用 XHTML Select 元素的下拉列表中有大量选项 数十个 我需要使用 JavaScript 检索所选选项 Problem 目前我正在使用 jQuery selectedCSS 选择器并且它按预期工作 但这种方法效率不高 因为
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 输入和文本区域可以拖动吗?

    MDN 规范以及我能通过 Google 找到的每个网站都说所有 HTML 元素都可以拖动 然而 在实践中 我发现我无法拖动文本输入或文本区域 即使它们已被禁用 例如 使用以下代码 img src http www placehold it
  • jqPlot DateAxis tickInterval 不起作用

    我试图每月绘制一个包含单个数据点的图表 我会在每个月的第一天将其作为一个点发送到 jqPlot jqplot actualChart 2011 10 01 0 296 2011 11 01 0 682 title programSelect
  • 通过ajax POST提交两次表单

    插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时 它执行了两次并得到作为重复记录的响应 好
  • 谷歌浏览器不显示一个网站的alert()弹出窗口

    我正在开发一个 javascript 循环 该循环会随着循环的进行而提醒每个键值 为了加快速度 我选中了 阻止此页面创建其他对话框 框 通常这只会抑制一个例程的弹出窗口 但它们还没有回来 在 Google Chrome 中 alert 消息
  • 为缺少字体的 Web 浏览器降低 Unicode 字符的质量

    我在 html 文档中使用 Unicode 检查标记 U 2713 我发现它在大多数浏览器中都可以正常显示 但偶尔我会遇到有人的电脑上缺少字体 如果字体丢失 是否有 HTML JS 技巧来指定替代显示字符 或图像 没有直接的方法可以判断任何
  • 为什么对于大于 65776 像素的画布源,drawImage 性能差异很大

    我在 jsperf 上写了一些与以下相关的测试用例 1 在屏幕外画布上绘图 2 将图像绘制到屏幕画布上 我发现如果源画布中的像素数 无论 dst 小于 65776 像素 性能会高得多 我预计这个性能限制是 65536 像素 如果有的话 He
  • 检测 HTML5 视频何时结束

    如何检测 HTML5
  • Django:单击按钮加载另一个模板

    我已经在 django 项目上工作了几个星期 只是玩玩以便掌握它的窍门 我有点困惑 我现在有一个名为 home html 的模板 我想知道是否可以将另一个名为 profile html 的模板设置为 home html 模板上的链接 我有一
  • 限制在三角形内

    我正在寻找一段通用代码 javascript 它可以与 jquery UI 一起使用来限制三角形内 div 的移动 拖动 与此类似 http stackoverflow com questions 8515900 how to constr
  • HTML 嵌入对象具有灰色背景。可以透明吗?

    我使用带有开源插件的 Firefox 来播放视频 视频被 尽可能好地 缩放以适应嵌入对象的宽度和高度中定义的可用空间 但有时右侧和 或底部会有一点灰色边框 看来这不是我的父 div 的背景颜色 因为更改它根本没有效果 这是 HTML div
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding

随机推荐

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

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