关于elementui表单验证数字的问题

news2024/11/24 11:31:10

千里之行始于足下
熟能生巧,不熟怎么生巧

最近编写项目时候遇到一个这样的问题,elementui 表单验证价格是否为数字,
正常来说只需要将规则写为如下

 { required: true, type: 'number', message: "请填写正确的数字", trigger: "blur" },

并且给v-model 加上.number修饰符,即可,但是我遇到这样一种情况
如果为修改情况,将获取到的值赋予给form组件后,提交修改会触发验证失败问题,才知道,number修饰符是在修改值时候才会触发,也就是一开始赋予的值是一个数字字符串,并没有被转换,而验证规则要求是一个数字,而非数字字符串,进而无法通过验证
一开始我是这样想着洁解决的:
1、在赋予表单值时候,将里边的数字字符串转为数字
2、自定义验证规则

const validatePrice = (rule: any, value: any, callback: any) => {
  const reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
  if (reg.test(value)) {
    callback();
  } else {
    return callback(new Error("请填写正确的数字"))
  }
}

3、最终发现问题应该出在数据库表设计的不合理上,将price类型修改为float即可,这样子就没必要写多余的验证器了,但是如果想验证是否为大于0 的合规的价格,也可以做验证 (验证器也有方法可以设置,设置规则当中min即可)
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/988658.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

引爆用户参与:消息重弹,让您的推送不再被忽略

在当前各大APP拉新促活成本居高不下的大背景下,如何稳定存量用户、提升用户粘性就显得尤为关键。从促销活动到个性化推荐,从互动通知到功能提醒,消息推送已成为各大APP连接存量用户和目标市场之间的桥梁,通过点击推送,…

ADS1219芯片解读

使用10-kΩ热敏电阻的温度测量是使用比率测量实现的实现最佳精度的方法。模拟电源电压AVDD用作电阻器分压器配置中的热敏电阻,以及ADS1219的外部参考电压V REF。 ADS1219的输出代码和热敏电阻R热敏电阻之间的关系是通过以下方程式。公式 10将输入AIN0处的输入电压表…

全网超50万粉丝的Linux大咖良许,出书了!

全网超50万粉丝的Linux大咖良许 出书了! 今天我们要说的就是这本由Linux领域头部号主,良许老师编写的这本《速学Linux:系统应用从入门到精通》 如果你是刚开始学习Linux的小白同学,相信你已经体会到与学习一门编程语言相比&…

【源码解读】VUE2.0和VUE3.0响应式区别?

数据劫持的目的 VUE2.0和VUE3.0实现响应式的底层逻辑,是对数据做劫持,为什么要劫持数据呢?是因为,劫持数据后才可以,在更改数据同时对页面进行重新渲染,从而达到响应式。 VUE3.0响应原理 VUE3.0使用了ES…

适配器模式:如何让不兼容的接口变得兼容

在软件开发中,我们经常会遇到这样的情况:我们需要使用一个现有的类或者接口,但它与我们系统的目标接口不兼容,而我们又不能修改它。这时候,我们该怎么办呢?大多数情况下我们都可以使用适配器模式来解决这个…

hutool的HttpRequest.post的使用-包括上传文档等多个传参【总结版本】

首先hutool已经为我们封装好了远程调用的接口,我们只要将对应的传参和方式对应填写即可 hutool官方文档 1实际应用 post 常见的使用json传参,contend type为application/json RequestMapping("login") ResponseBody public static String s…

中国人大与加拿大女王大学中外合作办学金融硕士——学习是你世界的圆吗

有人说,可以把每个人的世界比作一个圆,学习是半径,半径越大,拥有的世界就越广阔。你认同这种观点吗,金融领域的你有想过拓宽知识的边界吗?来人大女王中外合作办学金融硕士项目在职读研,超越自我…

【多线程】线程 与 进程

线程 与 进程 一. 进程1. 操作系统2. 什么是进程/任务(Process/Task)3. 为什么要有进程3. 操作系统怎样管理进程4. 进程控制块抽象(PCB Process Control Block)5. 进程调度6. 内存分配 —— 内存管理(Memory Manage)7. 进程间通信…

【C++】匿名对象 | explicit | static静态成员 | 友元

匿名对象 有些情况下,我们创建变量只是临时用一用,以后不会再用到了。这时,如果创建变量还要起名字,是不是很多余? 对此,C引入了 匿名对象 供临时使用。 例如:如果我们创建对象slt&#xff0c…

什么是主动元数据管理?有何优势?

元数据是描述数据的数据,它提供数据的来源、含义、位置、所有权和创建等信息,主要用于跟踪、分类和分析。 元数据管理则是对元数据的创建、存储、整合、控制的一整套流程,是数据治理过程的一部分,能够支持基于元数据的相关需求和…

NFT Insider#106:The Sandbox 与 Light Matrix 以及鲁比尼拳击场达成战略合作

引言:NFT Insider由NFT收藏组织WHALE Members、BeepCrypto联合出品,浓缩每周NFT新闻,为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据,艺术新闻类,游戏新闻类,虚拟世界类&#…

Android12之解析/proc/pid进程参数(一百六十四)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

python通过tkinter制作词云图工具

一、基本功能 1.采取上传文本文档(仅支持.txt格式)的方式统计词频 2.背景图形样式可选择已经设定好的,也可选择本地上传的(支持.png .jpg .jpeg格式) 3.本地上传的图片需要进行抠图处理,并将抠图结果保存…

大乘数法 -Java

题目链接:https://www.nowcoder.com/practice/c4c488d4d40d4c4e9824c3650f7d5571?tpId196&tqId37177&rp1&ru/exam/company&qru/exam/company&sourceUrl%2Fexam%2Fcompany&difficultyundefined&judgeStatusundefined&tags&titl…

SAP 批量删除变式

使用事务码se38进入变式,通过搜索帮助选中一个变式,点击显示。 点击目录,会显示所有的变式名称。 会显示当前程序的所有变式,然后点击删除按钮,选择需要删除的变式。

CVPR2023 RIFormer, 无需TokenMixer也能达成SOTA性能的极简ViT架构

编辑 | Happy 首发 | AIWalker 链接 | https://mp.weixin.qq.com/s/l3US8Dsd0yNC19o7B1ZBgw project, paper, code Token Mixer是ViT骨干非常重要的组成成分,它用于对不同空域位置信息进行自适应聚合,但常规的自注意力往往存在高计算复杂度与高延迟问题。…

FP130A 封装SOT23-5L 轨道电流测量IC

FP130A 封装SOT23-5L 轨道电流测量IC 一般说明 FP130A是一种宽共模范围高侧轨电流测量IC。它适用于电源系统,如电池充电器或开关电源的应用。它包括一个差分输入放大器和一个具有发射极输出的NPN晶体管。有三个外部电阻,轨道电流信号可以很容易地转换为I…

VR软件与管理后台的协议(微信扫码)

一、微信扫码登录 1、设计流程: ①、VR软件界面生成二维码,二维码中携带跳转小程序的链接及设备号、公司ID;用户通过扫码进入微信小程序点击界面一键启动,开始完善个人信息。 ②、用户点击一键启动,用户信息的授权状态…

入门人工智能 —— 学习 python 使用 IDE :vscode 完成编程 (2)

入门人工智能 —— 学习 python 使用 IDE :vscode 完成编程 (2) 安装和配置 VSCode创建和运行 Python 代码使用 VSCode 的调试功能 在上一篇文章中,介绍了如何入门人工智能编程,并开始了学习 Python 编程语言的基础知识…

润和软件HopeStage与上海瑞美云LIS系统管理软件完成产品兼容性互认证

近日,江苏润和软件股份有限公司(以下简称“润和软件”)HopeStage 操作系统与上海瑞美电脑科技有限公司(以下简称“上海瑞美”)瑞美云LIS系统管理软件完成产品兼容性测试。 测试结果表明,企业级通用操作系统…