element中el-input限制只输入正整数或保留两位小数

文章目录

  • 一、前言
  • 二、实现
    • 2.1、`HTML`
    • 2.2、只输入正整数
    • 2.3、只能输入数字或小数点
  • 三、最后

一、前言

常见的el-input可能会限制用户只能输入正整数或保留两位小数,达到输入金额的需求,点击【跳转】访问el-input的官方文档

element-ui是有el-input-number这个组件,但是个人觉得不适用,该组件更适合加减数量,点击【跳转】访问el-input-number的官方文档

二、实现

2.1、HTML

<template><el-inputv-model="number"@input="validateInput"/>
</template>

2.2、只输入正整数

export default {data() {return {number: ""}},methods: {// 限制正整数输入validateInput(value) {value = value.replace(/[^0-9]/g, "");if (value.indexOf(0) == 0) {value = "";}    }}
}

2.3、只能输入数字或小数点

export default {data() {return {number: "",}},methods: {// 限制只能输入数字或小数点validateInput(value) {value = value.replace(/[^\d{1,}.\d{1,}|\d{1,}]/g, "");value = value.replace(/^(-)*(\d+).(\d\d).*$/, "$1$2.$3");}}
}

三、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

速通MySql

一、简介 1、什么是数据库 数据仓库&#xff0c;用来存储数据。访问必须用SQL语句来访问 2、数据库的类型 1、关系型数据库&#xff1a;Oracle、DB2、Microsoft SQL Server、Microsoft Access、MySQL等 可以用SQL语句方便的在一个表以及多个表之间做非常复杂的数据查询&#…

flutter开发实战-ValueListenableBuilder实现局部刷新功能

flutter开发实战-ValueListenableBuilder实现局部刷新功能 在创建的新工程中&#xff0c;点击按钮更新counter后&#xff0c;通过setState可以出发本类的build方法进行更新。当我们只需要更新一小部分控件的时候&#xff0c;通过setState就不太合适了&#xff0c;这就需要进行…

图解「差分」入门(“前缀和“ 到 “差分“ 丝滑过渡)

题目描述 这是 LeetCode 上的 「1094. 拼车」 &#xff0c;难度为 「中等」。 Tag : 「差分」、「前缀和」 车上最初有 capacity 个空座位&#xff0c;车只能向一个方向行驶&#xff08;不允许掉头或改变方向&#xff09;。 给定整数 capacity 和一个数组 trips, 表示第 i 次旅…

java: 警告: 源发行版 17 需要目标发行版 17

这是一个编译期的报错提示 源发行版 17 , 即说明你的maven项目当前指定的编译版本是jdk17&#xff0c;需要目标发行版 17则是说明你的idea中实际选择的jdk版本并非17 检查你项目中的pom文件中的配置 <properties><java.version>17</java.version><prop…

【渗透】记录阿里云CentOS一次ddos攻击

文章目录 发现防御 发现 防御 流量清洗 使用高防

2024年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷

2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷 2024 年甘肃省职业院校技能大赛中职组 电子与信息类“网络安全”赛项竞赛样题-B卷A 模块基础设施设置/安全加固&#xff08;200 分&#xff09;A-1&#xff1a;登录安全加固&#xff08;Windows…

校园门禁可视化系统解决方案

随着科技的持续进步&#xff0c;数字化校园在教育领域中的地位日益上升&#xff0c;各种智能门禁、安防摄像头等已遍布校园各个地方&#xff0c;为师生提供安全便捷的通行体验。然而数据收集分散、缺乏管理、分析困难等问题也逐渐出现&#xff0c;在这个数字化环境中&#xff0…

Apache Flink(五):Apache Flink快速入门 - 环境准备及入门案例

&#x1f3e1; 个人主页&#xff1a;IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 &#x1f6a9; 私聊博主&#xff1a;加入大数据技术讨论群聊&#xff0c;获取更多大数据资料。 &#x1f514; 博主个人B栈地址&#xff1a;豹哥教你大数据的个人空间-豹…

Yocto版本信息查询

文章目录 yocto官方发布版本当前版本完整版本信息yocto与内核版本对应 Yocto工程查找版本Yocto镜像查找版本启动串口打印系统配置 参考 yocto官方发布版本 当前版本 如下图所示&#xff0c;当前yocto的主要维护版本&#xff0c;几乎每年一年版本&#xff0c;当前为5.0版本 …

C语言之联合和枚举

C语言之联合和枚举 文章目录 C语言之联合和枚举1. 联合体1.1 联合体的声明1.2 联合体的特点1.3 结构体和联合体对比1.4 联合体大小的计算1.5 联合体小练习 2. 枚举2.1 枚举类型的声明2.2 枚举类型的优点2.3 枚举类型的使用 1. 联合体 1.1 联合体的声明 像结构体⼀样&#xff…

TZOJ 1429 小明A+B

答案&#xff1a; #include <stdio.h> int main() {int T0, A0, B0, sum0;scanf("%d", &T); //输入测试数据的组数while (T--) //循环T次{scanf("%d %d", &A, &B); //输入AB的值sum A B;if (sum > 100) //如果是三位数{…

java原子类型

AtomicBoolean AtomicInteger AtomicLong AtomicReference<V> StringBuilder - 不是原子类型。StringBuilder 是 java.lang 包下的类 用法&#xff1a;无需回调改变数值