input、el-input输入框输入规则

一、input

只能输入框只能输入正整数,输入同时禁止了以0开始的数字输入,防止被转化为其他进制的数值。
<!-- 不能输入零时-->
<input type='text' οninput="value=value.replace(/^(0+)|[^\d]+/g,'')"><!-- 能输入零时-->
<input type='text' οninput="value=value.replace(/^0+(\d)|[^\d]+/g,'')">
附:只能输入中文:
<input type="text" οninput="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">  
附:只能输入英文:
<input type="text" οninput="this.value=this.value.replace(/[^a-zA-Z]/g,'')">  

二、el-input

<el-input size="small"οnkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"v-model="count"maxlength="9"></el-input>
data() {return {count: 0}
}

el-input输入金额,保留两位小数

需求:“只允许输入金额保留两位小数”,有2种实现方法
方法一(通过正则控制):
<el-inputv-model="inputTable.amount"@input="formatNum(form.amount, 'amount')"
></el-input>
formatNum(val, key) {let temp = val.toString();temp = temp.replace(/。/g, ".");temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符temp = temp.replace(/^\./g, ""); //验证第一个字符是数字temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数this.form[key] = temp;
},

方法二(使用组件):

这个是我最近才发现的,方便多了TT
设置精度precision,即可四舍五入;
再改改样式,隐藏按钮,靠左对齐,最后效果和普通的input无异

 <el-input-number v-model="num" :precision="2"></el-input-number>

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

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

相关文章

luceda ipkiss教程 43:画渐变圆弧型波导

案例分享&#xff1a; from si_fab import all as pdk import ipkiss3.all as i3 from ipcore.properties.restrictions import RestrictTuple from ipkiss.geometry.shapes.modifiers import __ShapePathBase__ import numpy as np from math import atan2class ShapePathTa…

[java]学生管理系统

一、学生类 首先创建一个学生类&#xff0c;定义学号姓名年龄居住地 public class Student {private String id;private String name;private String age;private String address;//构造函数public Student(String id, String name, String age, String address) {this.id i…

54.grpc实现文件上传和下载

文章目录 一&#xff1a;简介1. 什么是grpc2. 为什么我们要用grpc 二&#xff1a;grpc的hello world1、 定义hello.proto文件2、生成xxx_grpc.pb.go文件3、生成xxx.pb.go结构体文件4、编写服务代码service.go5、编写客户端代码client.go 三、服务端流式传输&#xff1a;文件下载…

AIOps、微服务和云平台

数字景观正在从整体转向微服务、基于云的服务。企业和公司需要适应不断变化的技术格局并跟上变化。系统变得越来越复杂并且不容易管理。我将尝试解释一些较新的架构方法、趋势&#xff0c;并提供对 AIOps 的见解以及它如何帮助解决这个问题。 微服务 微服务架构正在成为最受欢…

什么是web组态?一文读懂web组态

随着工业4.0的到来&#xff0c;物联网、大数据、人工智能等技术的融合应用&#xff0c;使得工业领域正在经历一场深刻的变革。在这个过程中&#xff0c;web组态技术以其独特的优势&#xff0c;正在逐渐受到越来越多企业的关注和认可。那么&#xff0c;什么是web组态&#xff1f…

android-android源码目录

android源码目录 Android.bp art bionic bootable bootstrap.bash build build.sh compatibility cts dalvik developers development device external frameworks hardware IMAGE javaenv.sh kernel libcore libnativehelper Makefile mkcombinedroot mkimage_ab.sh mkimage.…

我的创作纪念日——一年

机缘 初心始于对技术的热爱和分享知识的渴望。最初&#xff0c;我在一次练习中遇到了一些问题&#xff0c;通过解决这些问题并将解决方案记录下来&#xff0c;我意识到分享经验对自己和他人都非常有价值。于是&#xff0c;我开始在博客和社交平台上记录日常学习过程、撰写技术…

uni-app 获取PAD激光测温方式 (uni-app安卓获取广播内容)

直接在onload执行下列代码 var main plus.android.runtimeMainActivity(); //获取activityvar context plus.android.importClass(android.content.Context); //上下文var receiver plus.android.implements(io.dcloud.feature.internal.reflect.BroadcastReceiver, {onRece…

动力未来:特斯拉 Model S 电池技术一览

电动汽车是当今最具创新性和前景的交通工具之一,它们不仅能够提供高效、环保的驾驶体验,还能够减少对化石燃料的依赖,促进可持续发展。在电动汽车领域,特斯拉 Model S 是一款引领潮流的产品,它以其豪华、强劲的性能和尖端的电池技术而闻名。本文将为您介绍特斯拉 Model S …

【springboot设计源码】庆阳非物质文化遗产展示平台课题背景、目的、意义、研究方法

该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程等学习内容。 目录 一、项目介绍&#xff1a; 二、文档学习资料&#xff1a; 三、模块截图&#xff1a; 四、开发技术与运行环境&#xff1a; 五、代码展示&#xff1a; 六、数据库表截图&#xff1…

即时通讯技术文集(第26期):实时音视频技术合集(Part1) [共16篇]

为了更好地分类阅读 52im.net 总计1000多篇精编文章&#xff0c;我将在每周三推送新的一期技术文集&#xff0c;本次是第26 期。 [- 1 -] 实时语音聊天中的音频处理与编码压缩技术简述 [链接] http://www.52im.net/thread-825-1-1.html [摘要] 在视频或者音频通话过程中&…

2023-12-09 LeetCode每日一题(下一个更大的数值平衡数)

2023-12-09每日一题 一、题目编号 2048. 下一个更大的数值平衡数二、题目链接 点击跳转到题目位置 三、题目描述 如果整数 x 满足&#xff1a;对于每个数位 d &#xff0c;这个数位 恰好 在 x 中出现 d 次。那么整数 x 就是一个 数值平衡数 。 给你一个整数 n &#xff0…

数据结构和算法专题---4、限流算法与应用

本章我们会对限流算法做个简单介绍&#xff0c;包括常用的限流算法&#xff08;计数器、漏桶算法、令牌桶案发、滑动窗口&#xff09;的概述、实现方式、典型场景做个说明。 什么是限流算法 限流是对系统的一种保护措施。即限制流量请求的频率&#xff08;每秒处理多少个请求…

11_企业架构web服务器文件及时同步

企业架构web服务器的文件及时同步 学习目标和内容 1、能够理解为何要服务器间文件同步 2、能够简单描述实现文件同步的几种方式 3、能够实现服务器文件实时同步的案例 一、同步文件介绍 1、服务器文件同步的必要性 根据业务发展需求&#xff0c;业务网站架构已经发展到以上模式…

Linux文件结构与文件权限

基于centos了解Linux文件结构 了解一下文件类型 Linux采用的一切皆文件的思想&#xff0c;将硬件设备、软件等所有数据信息都以文件的形式呈现在用户面前&#xff0c;这就使得我们对计算机的管理更加方便。所以本篇文章会对Linux操作系统的文件结构和文件权限进行讲解。 首先…

单元测试Nunit的几种断言

Nunit提供了一些辅助函数用于确定好某个被测试函数是否正常工作。通常把这些函数称为断言 断言是单元测试最基本的组成部分。因此&#xff0c;NUnit程序库以Assert类的静态方法的形式提供了不同形式的多种断言 1. Assert.AreEqual&#xff1a;比较两个值是否相等。用于比较数…

Qt生成动态链接库并使用动态链接库

项目结构 整个工程由一个主程序构成和一个模块构成(dll)。整个工程的结构目录如下 Define.priMyProject.proMyProject.pro.user ---bin ---MainProgrammain.cppMainProgram.proMainProgram.pro.userwidget.cppwidget.hwidget.ui ---MathDllMathDll.proMathDll.pro.userMyMath.…

Axios 拦截器实战教程:简单易懂

Axios 提供了一种称为 “拦截器&#xff08;interceptors&#xff09;” 的功能&#xff0c;使我们能够在请求或响应被发送或处理之前对它们进行全局处理。拦截器为我们提供了一种简洁而强大的方式来转换请求和响应、进行错误处理、添加认证信息等操作。在本文中&#xff0c;我…

Matlab 点云收缩L1中值(Weiszfeld算法)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 对于之前的加权均值收缩方式,它存在一个很大的缺点,即容易受到噪声的影响,因此这里我们采用另一种统计学方案:L1中值。其形式如下所示: 其中 x i x_i

MongoDB的条件操作符

本文主要介绍MongoDB的条件操作符。 目录 MongoDB条件操作符1.比较操作符2.逻辑操作符3.元素操作符4.数组操作符5.文本搜索操作符 MongoDB条件操作符 MongoDB的条件操作符主要分为比较操作符、逻辑操作符、元素操作符、数组操作符、文本搜索操作符等几种类型。 以下是这些操作…